61、全站添加元素飘落效果-默认枫叶效果-优化版

前言：

这个功能其实很多朋友应该都有之前的那种樱花效果，但是用过的都知道那个樱花效果太妨碍阅读了，今天分享给大家一个优化版，减少了数量以及效果优化

安装

将下面的这段代码整合到新建 js 文件，命名 leaves.js，然后引用，就可以看到效果了，我就不上预览图了

var stop, staticx;
var img = new Image();
img.src = "https://img.vinua.cn/images/XwloV.webp";

function Sakura(x, y, s, r, fn) {
    this.x = x;
    this.y = y;
    this.s = s;
    this.r = r;
    this.fn = fn
}
Sakura.prototype.draw = function(cxt) {
    cxt.save();
    var xc = 20 * this.s / 2;
    cxt.translate(this.x, this.y);
    cxt.rotate(this.r);
    cxt.drawImage(img, 0, 0, 20 * this.s, 20 * this.s);
    cxt.restore()
};
Sakura.prototype.update = function() {
    this.x = this.fn.x(this.x, this.y);
    this.y = this.fn.y(this.y, this.y);
    this.r = this.fn.r(this.r);
    if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
        this.r = getRandom("fnr");
        if (Math.random() > 0.4) {
            this.x = getRandom("x");
            this.y = 0;
            this.s = getRandom("s");
            this.r = getRandom("r")
        } else {
            this.x = window.innerWidth;
            this.y = getRandom("y");
            this.s = getRandom("s");
            this.r = getRandom("r")
        }
    }
};
SakuraList = function() {
    this.list = []
};
SakuraList.prototype.push = function(sakura) {
    this.list.push(sakura)
};
SakuraList.prototype.update = function() {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].update()
    }
};
SakuraList.prototype.draw = function(cxt) {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].draw(cxt)
    }
};
SakuraList.prototype.get = function(i) {
    return this.list[i]
};
SakuraList.prototype.size = function() {
    return this.list.length
};

function getRandom(option) {
    var ret, random;
    switch (option) {
        case "x":
            ret = Math.random() * window.innerWidth;
            break;
        case "y":
            ret = Math.random() * window.innerHeight;
            break;
        case "s":
            ret = Math.random();
            break;
        case "r":
            ret = Math.random() * 4;
            break;
        case "fnx":
            random = -0.5 + Math.random() * 1;
            ret = function(x, y) {
                return x + 0.5 * random - 1.7
            };
            break;
        case "fny":
            random = 1.5 + Math.random() * 0.7;
            ret = function(x, y) {
                return y + random
            };
            break;
        case "fnr":
            random = Math.random() * 0.03;
            ret = function(r) {
                return r + random
            };
            break
    }
    return ret
}

function startSakura() {
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
    var canvas = document.createElement("canvas"),
        cxt;
    staticx = true;
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    canvas.setAttribute("style", "position: fixed;left: 0;top: 0;pointer-events: none;");
    canvas.setAttribute("id", "canvas_sakura");
    document.getElementsByTagName("body")[0].appendChild(canvas);
    cxt = canvas.getContext("2d");
    var sakuraList = new SakuraList();
    for (var i = 0; i < 50; i++) {
        var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
        randomX = getRandom("x");
        randomY = getRandom("y");
        randomR = getRandom("r");
        randomS = getRandom("s");
        randomFnx = getRandom("fnx");
        randomFny = getRandom("fny");
        randomFnR = getRandom("fnr");
        sakura = new Sakura(randomX, randomY, randomS, randomR, {
            x: randomFnx,
            y: randomFny,
            r: randomFnR
        });
        sakura.draw(cxt);
        sakuraList.push(sakura)
    }
    stop = requestAnimationFrame(function() {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        sakuraList.update();
        sakuraList.draw(cxt);
        stop = requestAnimationFrame(arguments.callee)
    })
}
window.onresize = function() {
    var canvasSnow = document.getElementById("canvas_snow")
};
img.onload = function() {
    startSakura()
};

function stopp() {
    if (staticx) {
        var child = document.getElementById("canvas_sakura");
        child.parentNode.removeChild(child);
        window.cancelAnimationFrame(stop);
        staticx = false
    } else {
        startSakura()
    }
};

默认效果是枫叶，如果想改成其他的可自行更换代码第三行中的文件图片矢量图，
网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。

<script src="你上传的文件路径地址/leaves.js"></script>

懒人调用版：

<!--全站枫叶飘落 start-->
<!--by：微梦云小屋-www.vinua.cn-->
<script src="https://www.vinua.cn/jsdelivr/leaves.js"></script>
<!--全站枫叶飘落 END-->

62、网站文章侧边栏添加旗下站点小工具导航

1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
2、添加路径：在后台—》外观—》小工具—》自定义 HTML—》选择你需要放的位置
3、我是添加在文章侧边栏
4、修改代码中的链接以及文字改为自己的

<div class="textwidget"><div class="attentionus"><span class="zhan-widget-link zhan-link-z1"> <span class="zhan-widget-link-count">超清无广告视频</span> <a href="链接地址" target="_blank" rel="noopener"><span class="zhan-widget-link-title">微梦视频</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z2"> <span class="zhan-widget-link-count">在线视频解析</span> <a href="链接地址" target="_blank" rel="noopener"><span class="zhan-widget-link-title">视频解析</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z3"> <span class="zhan-widget-link-count">全网超清壁纸</span> <a href="链接地址" target="_blank" rel="noopener"><span class="zhan-widget-link-title">电脑壁纸</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z4"> <span class="zhan-widget-link-count">抖音视频去水印</span> <a href="链接地址" target="_blank" rel="noopener"><span class="zhan-widget-link-title">抖音去水印</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z5"> <span class="zhan-widget-link-count">全网音乐搜索</span> <a href="链接地址" target="_blank" rel="noopener"><span class="zhan-widget-link-title">在线音乐搜索</span> </a></span></div>
<style type="text/css">
.zhan-widget-link{position:relative;margin-bottom:-10px !important;position:relative;display:block;font-size:13px;background:#fff;color:#525252;line-height:40px;margin-left:-10px;padding:0 14px;border:1px solid #DDD;border-radius:2px;width:auto}span.zhan-widget-link.zhan-link-z1 {margin-top: -10px;}.zhan-widget-link-count i{margin-right:9px;font-size:17px;vertical-align:middle}.zhan-widget-link-title{position:absolute;top:-1px;right:-14px !important;bottom:-1px;width:100px;text-align:center;background:rgba(255,255,255,.08);transition:width .3s;border-radius:0 3px 3px 0}.zhan-widget-link:hover .zhan-widget-link-title{width:116px}.zhan-widget-link a{position:absolute;top:0;left:0;right:0;bottom:0}.zhan-link-z1{border-color:rgba(236,61,81,.39)}.zhan-link-z1 i{color:#FFF;margin-right:3px}.zhan-link-z1 .zhan-widget-link-title{background-color:#ec3d51;color:#fff}.zhan-link-z2{border-color:rgba(18,170,232,.39)}.zhan-link-z2 i{color:#FFF;margin-right:3px}.zhan-link-z2 .zhan-widget-link-title{background-color:#12aae8;color:#fff}.zhan-link-z3{border-color:rgba(221,7,208,.39)}.zhan-link-z3 i{color:#FFF;margin-right:3px}.zhan-link-z3 .zhan-widget-link-title{background-color:#dd07d0;color:#fff}.zhan-link-z4{border-color:rgba(249,82,16,.39)}.zhan-link-z4 i{color:#FFF;margin-right:3px}.zhan-link-z4 .zhan-widget-link-title{background-color:#f95210;color:#fff}.zhan-link-z5{border-color:rgba(25,152,114,.39)}.zhan-link-z5 i{color:#FFF;margin-right:3px}.zhan-link-z5 .zhan-widget-link-title{background-color:#199872;color:#fff}</style>
</div>

效果预览

63、在首页添加一个多功能导航模块小工具

将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
添加路径：在后台—》外观—》小工具—》自定义 HTML—》选择你需要放的位置
我是添加在首页顶部全宽度
修改代码中的链接以及文字改为自己的就好

<!--首页四个导航模块样式文件-->
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.vinua.cn/jsdelivr/dhmk.css">
  <link rel="stylesheet" href="https://www.vinua.cn/jsdelivr/iconfontdhmk.css">
  <script type="text/javascript" src="https://www.vinua.cn/jsdelivr/iconfontdhmk.js"></script>
<!--首页四个导航模块-->
<div class="ads-box"> 
  <div class="home-first"> 
  <div class="container hide_sm"> 
   <div class="row ron"> 
     <!--导航模块 1-->
    <div class="col-1-4"> 
     <div class="hf-widget hf-widget-1 hf-widget-software"> 
    <h3 class="hf-widget-title"> 
    <svg class="ydicon" aria-hidden="true">
      <use xlink:href="#icon-huiyuan"></use>
    </svg> 
    <a href="/user/" target="_blank" rel="noopener">会员中心</a><span>专属贴心服务</span> 
    </h3> 
    <div class="hf-widget-content"> 
     <div class="scroll-h"> 
      <ul> 
       <li><a href="/user/" target="_blank" rel="noopener">
       <svg class="kuai" aria-hidden="true">
      <use xlink:href="#icon-dingyue"></use>
       </svg><span>升级会员</span></a></li> 
       <li><a href="/message/news" target="_blank" rel="noopener">
       <svg class="kuai" aria-hidden="true">
      <use xlink:href="#icon-xiaoxi"></use>
       </svg><span>消息订单</span></a></li> 
       <li><a href="/renzheng/" target="_blank" rel="noopener">
       <svg class="kuai" aria-hidden="true">
      <use xlink:href="#icon-zhinan"></use>
       </svg><span>身份认证</span></a></li> 
       <li><a href="/newposts/" target="_blank" rel="noopener">
       <svg class="kuai" aria-hidden="true">
      <use xlink:href="#icon-tougaofabu"></use>
       </svg><span>资源投稿</span></a></li> 
      </ul>       
     </div> 
    </div> 
     </div> 
    </div> 
      <!--导航模块 2-->
    <div class="col-1-4"> 
     <div class="hf-widget hf-widget-2"> 
    <h3 class="hf-widget-title">
    <svg class="ydicon" aria-hidden="true">
      <use xlink:href="#icon-tishi"></use>
    </svg>
    <a href="/" target="_blank" rel="noopener">广告服务</a><span>广告位展示</span> </h3> 
    <div class="hf-widget-content"> 
     <div class="no-scroll hf-tags"> 
      <a class="style_orange" href="/" target="_blank" rel="noopener"><span>广告位 1</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 2</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 3</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 4</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 5</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 6</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 7</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 8</span></a> 
     </div> 
    </div> 
     </div> 
    </div> 
      <!--导航模块 3-->
    <div class="col-1-4"> 
     <div class="hf-widget hf-widget-1 hf-widget-hot-cats"> 
    <h3 class="hf-widget-title">
    <svg class="ydicon" aria-hidden="true">
      <use xlink:href="#icon-kuaijiedaohang-ceping"></use>
    </svg>
    <a href="https://www.vinua.cn" target="_blank" rel="noopener">快捷导航</a><span>微梦云小屋</span> </h3> 
    <div class="hf-widget-content"> 
     <div class="scroll-h"> 
      <ul> 
       <li><a href="/" target="_blank" rel="noopener">
       <i class="hhicon iconfont icon-moban"></i><span>网站源码</span></a></li> 
       <li><a href="/" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-yuanma"></i><span>主题模板</span></a></li> 
<li><a href="/" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-jiaocheng"></i><span>教程分享</span></a></li> 
<li><a href="./links" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-moban"></i><span>友情链接</span></a></li> 
      </ul> 
     </div> 
    </div> 
     </div> 
    </div> 
      <!--导航模块 4-->
    <div class="col-1-4"> 
     <div class="hf-widget hf-widget-4"> 
    <h3 class="hf-widget-title">
    <svg class="ydicon" aria-hidden="true">
      <use xlink:href="#icon-dongtai"></use>
    </svg>
    <a href="/" target="_blank" rel="noopener">最新活动</a><span>注册会员享福利</span>      
    </h3> 
    <div class="hf-widget-content"> 
<div class="scroll-h"> 
<ul> 
<li><h3><a href="/" target="_blank" rel="noopener"> <i class="icon-time"></i> <span>每日新闻早报 60s</span><em>立即阅读</em></a></h3></li> 
<li><h3><a href="/user/" target="_blank" rel="noopener"> <i class="icon-time"></i> <span>签到领积分，资源免费下！</span><em>会员中心</em></a></h3></li> 
      </ul>       
     </div> 
    </div> 
     </div> 
    </div> 
   </div> 
  </div> 
   </div>
</div>
<!--首页四个导航模块结束-->

预览图

64、简单一步给子比文章标题加上渐变彩色文字

【子比美化】简单一步给子比文章标题加上渐变彩色文字

1年前

25102530

65、WordPress侧边栏添加简单的小模块

WordPress侧边栏添加简单的小模块[WP小工具]

1年前

195142

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

版权声明 1 本网站名称：微梦云小屋
2 本站永久网址：https://www.vinua.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ1028555528进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END