实现效果
接入天气预报数据
实现方式对比
代码示例
Weather.htm
<html lang="zh-CN">
<head>
<title>Weather from
</head>
<body>
<!--
参数py：城市全拼，切换城市自行修改，如页面无法显示请直接访问src中地址，查看能否正常显示
-->
<iframe name="weather_inc"
style="border: solid 1px #7ec8ea" width="650" height="600" frameborder="0" marginwidth="0"
marginheight="0" scrolling="no"></iframe>
<script type="text/javascript">
var scrollY = 0;
var maxY = 650; //卷动画面最大高度
var direction = 0
function scrollWindow() {
if (direction == 0) {
window.scrollBy(0, +1);
if (scrollY > maxY) {
direction = 1;
}
else
scrollY = scrollY + 2; //每次卷动的单位
}
else
{
window.scrollTo(0, 0);
direction = 0;
scrollY = 0;
}
}
function initialize() {
timer = setInterval("scrollWindow()", 180); //速度
}
initialize();
document.body.onmouseover = function () { clearInterval(timer); }
document.body.onmouseout = function () { initialize(); }
</script>
</body>
</html>
控制显示范围Index.htm
<html lang="zh-CN">
<head>
<title>Index</title>
</head>
<body>
<iframe src="Weather.htm" style="border: solid 1px #7ec8ea" width="453" height="247"
frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</body>
</html>