知更鸟Begin主题添加下雪特效 – WordPress美化

王小优
王小优
王小优
231
文章
0
评论
更多
2015年9月11日
评论6,047 4623字阅读15分24秒

知更鸟Begin主题添加下雪特效 – WordPress美化

一、部署JS代码

将下面代码保存为JS文件，文件名：snow.js：

  1. (function() {
  2.     function k(a, b, c) {
  3.         if (a.addEventListener) a.addEventListener(b, c, false);
  4.         else a.attachEvent && a.attachEvent("on" + b, c)
  5.     }
  7.     function g(a) {
  8.         if (typeof window.onload != "function") window.onload = a;
  9.         else {
  10.             var b = window.onload;
  11.             window.onload = function() {
  12.                 b();
  13.                 a()
  14.             }
  15.         }
  16.     }
  18.     function h() {
  19.         var a = {};
  20.         for (type in {
  21.             Top: "",
  22.             Left: ""
  23.         }) {
  24.             var b = type == "Top" ? "Y" : "X";
  25.             if (typeof window["page" + b + "Offset"] != "undefined")
  26.                 a[type.toLowerCase()] = window["page" + b + "Offset"];
  27.             else {
  28.                 b = document.documentElement.clientHeight ? document.documentElement : document.body;
  29.                 a[type.toLowerCase()] = b["scroll" + type]
  30.             }
  31.         }
  32.         return a
  33.     }
  35.     function l() {
  36.         var a = document.body,
  37.             b;
  38.         if (window.innerHeight) b = window.innerHeight;
  39.         else if (a.parentElement.clientHeight) b = a.parentElement.clientHeight;
  40.         else if (a && a.clientHeight) b = a.clientHeight;
  41.         return b
  42.     }
  44.     function i(a) {
  45.         this.parent = document.body;
  46.         this.createEl(this.parent, a);
  47.         this.size = Math.random() * 10 + 15; /* 两个数字控制雪花的大小，目前代码控制雪花尺寸为10~25px */
  48.         this.el.style.width = Math.round(this.size) + "px";
  49.         this.el.style.height = Math.round(this.size) + "px";
  50.         this.maxLeft = document.body.offsetWidth - this.size;
  51.         this.maxTop = document.body.offsetHeight - this.size;
  52.         this.left = Math.random() * this.maxLeft;
  53.         this.top = h().top + 1;
  54.         this.angle = 1.4 + 0.2 * Math.random();
  55.         this.minAngle = 1.4;
  56.         this.maxAngle = 1.6;
  57.         this.angleDelta = 0.01 * Math.random();
  58.         this.speed = 2 + Math.random()
  59.     }
  60.     var j = false;
  61.     g(function() {
  62.         j = true
  63.     });
  64.     var f = true;
  65.     window.createSnow = function(a, b) {
  66.         if (j) {
  67.             var c = [],
  68.                 m = setInterval(function() {
  69.                     f && b > c.length && Math.random() < b * 0.0025 && c.push(new i(a));
  70.                     !f && !c.length && clearInterval(m);
  71.                     for (var e = h().top, n = l(), d = c.length - 1; d >= 0; d--)
  72.                         if (c[d]) if (c[d].top < e || c[d].top + c[d].size + 1 > e + n) {
  73.                                 c[d].remove();
  74.                                 c[d] = null;
  75.                                 c.splice(d, 1)
  76.                             } else {
  77.                                 c[d].move();
  78.                                 c[d].draw()
  79.                             }
  80.                 },
  81.                     40);
  82.             k(window, "scroll", function() {
  83.                 for (var e = c.length - 1; e >= 0; e--) c[e].draw()
  84.             })
  85.         } else g(function() {
  86.                 createSnow(a, b)
  87.             })
  88.     };
  89.     window.removeSnow = function() {
  90.         f = false
  91.     };
  92.     i.prototype = {
  93.         createEl: function(a, b) {
  94.             this.el = document.createElement("img");
  95.             this.el.setAttribute("src", b + "https://www.wangxiaoyou.com/wp-content/themes/begin/snow/snow" + Math.floor(Math.random() * 4) + ".gif"); /* 注意修改为四个雪花文件所在的目录地址 */
  96.             this.el.style.position = "absolute";
  97.             this.el.style.display = "block";
  98.             this.el.style.zIndex = "99999";
  99.             this.parent.appendChild(this.el)
  100.         },
  101.         move: function() {
  102.             if (this.angle < this.minAngle || this.angle > this.maxAngle)
  103.                 this.angleDelta = -this.angleDelta;
  104.             this.angle += this.angleDelta;
  105.             this.left += this.speed * Math.cos(this.angle * Math.PI);
  106.             this.top -= this.speed * Math.sin(this.angle * Math.PI);
  107.             if (this.left < 0) this.left = this.maxLeft;
  108.             else if (this.left > this.maxLeft) this.left = 0
  109.         },
  110.         draw: function() {
  111.             this.el.style.top = Math.round(this.top) + "px";
  112.             this.el.style.left = Math.round(this.left) + "px"
  113.         },
  114.         remove: function() {
  115.             this.parent.removeChild(this.el);
  116.             this.parent = this.el = null
  117.         }
  118.     }
  119. })();
  120. createSnow("", 40);

二、下载JS文件压缩包

下载链接在文章末尾，下载后解压，将snow文件夹上传到主题目录下，下载的压缩包中已经提前为大家保存了snow.js文件。

三、引用JS代码

找到WordPress主题的footer.php文件（编辑之前请备份），在末尾</body>上方（这样可以最后加载特效，以免影响其他内容的访问速度），添加以下代码：

  1. <!-- 添加下雪特效 -->
  2. <script type="text/javascript" src="<?php bloginfo('template_url');?>/snow/snow.js"></script>

注：如果你没有把下载的snow文件夹上传到主题根目录下，请更改上述引用代码。

这个下雪特效，不仅适用于知更鸟Begin主题，同样适用于WordPress其他主题，只需要更改JS代码中的路径和引用代码即可。

下载信息 文件名称：知更鸟Begin主题添加下雪特效 应用平台：WordPress 文件大小：13KB 文件下载：3 次
网盘密码：发表评论并刷新可见
下载地址
若文章图片、下载链接等信息出错，请在评论区留言反馈，博主将第一时间更新！如果喜欢，请打赏支持本站，谢谢大家！
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
为WordPress最新文章增加NEW最新提示标志 WordPress美化

为WordPress最新文章增加NEW最新提示标志

纯代码给WordPress文章列表中新发布的文章增加NEW新文章提示，让你的博客更加饱满、人性化，一起跟王小优折腾起来。 看到不少网站的新文章后面都会有一个提示最新文章的文字或者图片，感觉比较人性化，...
2015年10月4日4,313评论
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: