通知
关于网站更多信息请加whimurmur模板/jpress插件QQ群(1061691290)            jpress从3.x升级到4.x,显示有些问题,慢慢修复中

whimurmur设置鼠标图片随天气变化

467人浏览 / 0人评论 / | 作者:whisper  | 分类: whimurmur模板  | 标签: 模板  | 

作者:whisper

链接:https://www.proprogrammar.com/article/853

声明:请尊重原作者的劳动,如需转载请注明出处


whimurmur中有很多好玩的内容,今天来讲一下设置鼠标随天气变化,雨天效果如下

晴天效果如下

下面来说具体说一下做法:

这里是利用改变html标签的一个class而实现的,这个class控制鼠标的样式,那么如何获知当地天气呢,这里是调用免费的天气api,利用你电脑的ip获知地区,然后返回你当地的天气信息,api可以自己搜索,下面看一下代码

js代码可以写在模板设置的js代码中,样式写在css代码中

css设置如下

css代码写在代码设置的自定义css代码的head中css代码里,我的代码如下

<style>
/*鼠标样式*/
.sunny{
    cursor:url("/templates/whimurmur/img/important/qing_cur.png") 0 16,auto;
}
.rainy{
    cursor:url("/templates/whimurmur/img/important/yu_cur.png") 0 0,auto;
}
</style>

两张鼠标图片一张是晴天,一张是雨天

然后是js代码

写在body开始js代码里,我的代码如下

<script>
$(function(){
// 自定义鼠标图片
$.get('https://v1.alapi.cn/api/weather/now',null,function(res){
    if(res && res.code == 200){
//console.log(res.data.now.cond_txt);
        var w = res.data.now.cond_txt;
        if(w && w.indexOf('雨') > -1){
            $('html').addClass('rainy');
        }else{
            $('html').addClass('sunny');
        }
    }
},'json');
});
</script>

上面的https:xxxx是api接口,查询当地天气,然后解析结果,如果天气中有雨字,说明是雨天,否则用晴天图片

很简单的用十几行代码就能实现鼠标图片随天气变化,你也可以发挥想像,用其它的图片,比如风景,动漫人物等,或者根据网站内容选择不同的鼠标图片


亲爱的读者:有时间可以点赞评论一下

点赞(0) 打赏

全部评论

还没有评论!
广告位-帮帮忙点下广告