使用代码实现WordPress下雪效果

  • A+
所属分类:WordPress

代码实现比较简单,雪花飘落速度、雪片大小和雪片的密度都可以根据自己的喜好调整。

下载好后解压放到你主题的根目录下。

然后我们在footer.php中加以引用:

  1. <script type="text/javascript" src="<?php bloginfo('template_url');?>/snow/snow.js"></script>

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

其中createSnow(“”, 40);是改变雪花密度,this.size = Math.random() * 5 + 5;是雪片大小参数。

雪花图片需要大家上传到自己的博客上,然后把链接地址填上就行了。效果截图如下:

使用代码实现WordPress下雪效果

weinxin
我的微信
分享和发布网站源码、免费软件下载和网站搭建技术教程,致力创造一个高质量网络资源教程的分享平台。

发表评论

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