jQuery天气预报插件_js天气预报插件代码
程序员文章站
2022-02-14 11:20:53
...
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