實(shí)現(xiàn)效果
接入天氣預(yù)報(bào)數(shù)據(jù)
實(shí)現(xiàn)方式對比
1、中國氣象局氣象網(wǎng)絡(luò)中心目前提供3天天氣預(yù)報(bào)數(shù)據(jù)，個(gè)人申請?jiān)S可約一周
接口地址：http://smart.weather.com.cn/wzfw/smart/weatherapi.shtml
2、云聚提供較為友好的商業(yè)服務(wù)，目前來看性價(jià)比較高
接口地址：http://www.36wu.com/Service/Details/1?cid=3
3、新浪提供iframe嵌入定制天氣模塊，當(dāng)前天天氣預(yù)報(bào)
接口地址：http://weather.news.sina.com.cn/chajian/
4、天氣網(wǎng)提供iframe嵌入定制天氣，未來五天天氣預(yù)報(bào)
接口地址：http://www.tianqi.com/plugin/
代碼示例
Weather.htm
<html lang="zh-CN">
<head>
<title>Weather from i.tianqi.com</title>
</head>
<body>
<!--
參數(shù)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; //卷動(dòng)畫面最大高度
var direction = 0
function scrollWindow() {
if (direction == 0) {
window.scrollBy(0, +1);
if (scrollY > maxY) {
direction = 1;
}
else
scrollY = scrollY + 2; //每次卷動(dòng)的單位
}
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>
