冬天了,利用插件或者代码给博客下场雪吧!

  • A+
所属分类:WordPress

入冬了,来给博客下一场雪吧!这里有三种方法,前两种是通用的,最后一种仅限于Wordpress

代码方法(不推荐)

展开

  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 + "域名+你主题的目录地址+/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);

将上述代码保存为snow.js,放在你主题的/snow/目录下,没有的话自己创建一个,这种方法的弊端在于需要自己找雪花图片四张放在主题的/snow/目录下,而且不具有灵活性,所以不推荐!

纯代码版(推荐)

展开

  1. <!doctype html>
  2.  <head>
  3.   <meta charset="UTF-8">
  4.   <title>下雪代码</title>
  5. <!-- 引入两段JS -->
  6. <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
  7. <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  8.  </head>
  9.  <body>
  10. <!-- 下面是JS代码,放在body中 -->
  11. <script type="text/javascript">
  12. (function($){
  13.     $.fn.snow = function(options){
  14.     var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
  15.     documentHeight  = $(document).height(),
  16.     documentWidth   = $(document).width(),
  17.     defaults = {
  18.         minSize     : 10,
  19.         maxSize     : 20,
  20.         newOn       : 1000,
  21.         flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
  22.     },
  23.     options = $.extend({}, defaults, options);
  24.     var interval= setInterval( function(){
  25.     var startPositionLeft = Math.random() * documentWidth - 100,
  26.     startOpacity = 0.5 + Math.random(),
  27.     sizeFlake = options.minSize + Math.random() * options.maxSize,
  28.     endPositionTop = documentHeight - 200,
  29.     endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
  30.     durationFall = documentHeight * 10 + Math.random() * 5000;
  31.     $flake.clone().appendTo('body').css({
  32.         left: startPositionLeft,
  33.         opacity: startOpacity,
  34.         'font-size': sizeFlake,
  35.         color: options.flakeColor
  36.     }).animate({
  37.         top: endPositionTop,
  38.         left: endPositionLeft,
  39.         opacity: 0.2
  40.     },durationFall,'linear',function(){
  41.         $(this).remove()
  42.     });
  43.     }, options.newOn);
  44.     };
  45. })(jQuery);
  46. $(function(){
  47.     $.fn.snow({
  48.         minSize: 5, /* 定义雪花最小尺寸 */
  49.         maxSize: 50,/* 定义雪花最大尺寸 */
  50.         newOn: 300  /* 定义密集程度,数字越小越密集 */
  51.     });
  52. });
  53. </script>
  54. <!-- 代码结束 -->
  55.  </body>
  56. </html>

这是成品的HTMl代码,总体看起来相当简单,第一步引入JS文件,大部分主题已经引入了,所以无需操作,第二步将<script type="text/javascript">与</script>以及之间的代码加入到主题的</body>之前就可以了,非常简单,但树懒先生没有用这种,因为雪花不真实,没有生动的感觉,不会在飘下来的过程中自主换方向!

冬天了,利用插件或者代码给博客下场雪吧!

最后一种是插件法,仅限于Wordpress(推荐)

冬天了,利用插件或者代码给博客下场雪吧!

抱着试一试的心态,树懒先生在安装插件页面搜索了一下关键词“snow”,果不其然,Wordpress的插件真的是很齐全了,连下雪的插件都有,启用之后,树懒先生发现还是很真实的,雪花在飘落过程中居然还可以换方向,真的是很不错了,果断选择了插件大法。

发表评论

不是我 偷笑 博学 友尽 可怜 吃惊 吃瓜 吐血 哈哈哈 嘻嘻嘻 坏笑 奋斗 委屈 尬笑 开心 微笑 思考 打脸 抠鼻子 无语 晕 机智 欲哭无泪 流汗 流泪 滑稽 生气 疑问 羡慕 耶 装逼 调皮 赞 难受 震惊 鼓掌

目前评论:21   其中:访客  9   博主  12

    • maqingxi maqingxi 0

      其实插件简单易用,但有些人比较排斥,我是觉得用完了再删除不是也可以吗?