jQuery天气预报插件_js天气预报插件代码
2016-09-19 12:54:43  By: shinyuu

• shinyuu
• JQuery教程
• 3
• 15442
• 14

Demo是一款jQuery自动定位当地位置、然后根据当前位置获取当前位置的天气预报代码、整体风格是一款绿色清爽风格的天气预报、已经封装成js插件、大家可以直接下载集成到自己项目使用、天气效果图如下

使用起来也非常简单、下面就把最核心的使用方式贴出来、供大家参考

1、引入js文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.leoweather.min.js"></script>

2、CSS代码

<style>
    body  { font:14px/1.5 微软雅黑; text-align:center; }
    table { border:1px solid #DDD; border-collapse:collapse; width:980px; margin-top:20px; }
    thead,
    tfoot { background:#FAFAFA; }
    td,th { border:1px solid #DDD; text-align:left; font-weight:normal; padding:15px; }
    th,
    .demo { width:100px; min-width:100px; max-width:100px; }
    td    { width:680px; min-width:680px; max-width:680px; }
    #demo { width:780px; margin:150px auto; background:#72af3c; color:#FFF; padding:50px 0 100px 0; overflow:hidden; border-radius:5000px; }
    #demo i { background: no-repeat top left; display:inline-block; height:128px; line-height:128px; margin:0 auto 20px auto; font-size:70px; padding-left:150px; font-style:normal; text-align:center; font-weight:bold; }
    #demo i.icon-xiaoyu { background-image:url(icon/xiaoyu.png); }
    #demo i.icon-zhongyu { background-image:url(icon/zhongyu.png); }
    #demo i.icon-dayu { background-image:url(icon/dayu.png); }
    #demo i.icon-qing { background-image:url(icon/qing.png); }
    #demo i.icon-duoyun { background-image:url(icon/duoyun.png); }
    #demo i.icon-yin { background-image:url(icon/yin.png); }
    #demo p { background:rgba(0,0,0,.3); margin:0 200px; padding:20px; border-radius:1000px; font-size:16px; }
    #demo p span { margin:0 15px; }
    #demo2 { width:980px; margin:0 auto; margin-top:20px; background:#fafafa; border:1px solid #ddd; padding:30px 0; overflow:hidden; }
</style>

3、html代码和js使用代码

<div id="demo">
    <script>
        $(´#demo´).leoweather({
            format:´<i class="icon-{图标}">{气温}℃</i><p>{城市}<span>|</span>{天气}<span>|</span>{风向}{风级}级</p>´
        });
    </script>
</div>
<div id="demo2">
    <script>$(´#demo2´).leoweather();</script>
</div>

使用起来也非常简单、Demo里面有相对应的Api、写得也比较详细、希望对大家有用

jquery天气预报插件源代码下载链接: js天气预报插件 密码: fe7r

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛