Iframe嵌入天气预报
2015-09-11 本文已影响1575人
过桥
实现效果
接入天气预报数据
实现方式对比
1、中国气象局气象网络中心目前提供3天天气预报数据，个人申请许可约一周
接口地址：http://smart.weather.com.cn/wzfw/smart/weatherapi.shtml
2、云聚提供较为友好的商业服务，目前来看性价比较高
接口地址：http://www.36wu.com/Service/Details/1?cid=3
3、新浪提供iframe嵌入定制天气模块，当前天天气预报
接口地址：http://weather.news.sina.com.cn/chajian/
4、天气网提供iframe嵌入定制天气，未来五天天气预报
接口地址：http://www.tianqi.com/plugin/
代码示例
Weather.htm
<html lang="zh-CN">
<head>
<title>Weather from i.tianqi.com</title>
</head>
<body>
<!--
参数py：城市全拼，切换城市自行修改，如页面无法显示请直接访问src中地址，查看能否正常显示
-->
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=57&py=nanjing"
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>
