欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

jQuery天气预报插件_js天气预报插件代码

程序员文章站 2022-02-14 11:20:53
...

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

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