记录成长
分享快乐

雪花飘落效果源码分享

好长一段时间没有更新文章了,主要原因是最近忙于过年没怎么折腾网站确实不知道更新些什么了,心想着再不更新博客就要长草了。俗话说的好“车到山前必有路”,既然最近一直在忙于过年,那么分享一篇与过年这个节日相关的文章想来应该是极好的,思考了半天决定整理分享下“雪花飘落效果”的源码比较好,遂有了这篇文章,经过多方比较,觉的雅兮网的这段源码无论从部署难易度还是从代码简洁性来看都是很不错的,我自己也使用上了这段代码为博客烘托下节日气氛。代码部分有些细微改动以进一步简化大家部署的困难,下面将具体部署方法分享一下。

雪花图片

在网站根目录下新建一个名为 snow 的文件夹,将雪花图片文件分别命名为 snow0.gif、 snow1.gif、 snow2.gif、 snow3.gif ,然后丢在该文件夹下。

JS 代码

将以下代码保存为 snow.js 文件并丢在上面新建的 snow 文件中即可。

/* 网页雪花飘落特效 */
(function() {
 function k(a, b, c) {
 if (a.addEventListener) a.addEventListener(b, c, false);
 else a.attachEvent && a.attachEvent("on" + b, c)
 }
 function g(a) {
 if (typeof window.onload != "function") window.onload = a;
 else {
 var b = window.onload;
 window.onload = function() {
 b();
 a()
 }
 }
 }
 function h() {
 var a = {};
 for (type in {
 Top: "",
 Left: ""
 }) {
 var b = type == "Top" ? "Y": "X";
 if (typeof window["page" + b + "Offset"] != "undefined")
 a[type.toLowerCase()] = window["page" + b + "Offset"];
 else {
 b = document.documentElement.clientHeight ? document.documentElement: document.body;
 a[type.toLowerCase()] = b["scroll" + type]
 }
 }
 return a
 }
 function l() {
 var a = document.body, b;
 if (window.innerHeight) b = window.innerHeight;
 else if (a.parentElement.clientHeight) b = a.parentElement.clientHeight;
 else if (a && a.clientHeight) b = a.clientHeight;
 return b
 }
 function i(a) {
 this.parent = document.body;
 this.createEl(this.parent, a);
 this.size = Math.random() * 10 + 15; //设置雪花的大小,目前雪花尺寸为10~25px
 this.el.style.width = Math.round(this.size) + "px";
 this.el.style.height = Math.round(this.size) + "px";
 this.maxLeft = document.body.offsetWidth - this.size;
 this.maxTop = document.body.offsetHeight - this.size;
 this.left = Math.random() * this.maxLeft;
 this.top = h().top + 1;
 this.angle = 1.4 + 0.2 * Math.random();
 this.minAngle = 1.4;
 this.maxAngle = 1.6;
 this.angleDelta = 0.01 * Math.random();
 this.speed = 2 + Math.random()
 }
 var j = false;
 g(function() {
 j = true
 });
 var f = true;
 window.createSnow = function(a, b) {
 if (j) {
 var c = [],
 m = setInterval(function() {
 f && b > c.length && Math.random()
 < b * 0.0025 && c.push(new i(a)); ! f && !c.length && clearInterval(m);
 for (var e = h().top, n = l(), d = c.length - 1; d >= 0; d--)
 if (c[d]) if (c[d].top < e || c[d].top + c[d].size + 1 > e + n) {
 c[d].remove();
 c[d] = null;
 c.splice(d, 1)
 } else {
 c[d].move();
 c[d].draw()
 }
 },
 40);
 k(window, "scroll",
 function() {
 for (var e = c.length - 1; e >= 0; e--) c[e].draw()
 })
 } else g(function() {
 createSnow(a, b)
 })
 };
 window.removeSnow = function() {
 f = false
 };
 i.prototype = {
 createEl: function(a, b) {
 this.el = document.createElement("img");
 this.el.setAttribute
 ("src", b+"/snow/snow"+Math.floor(Math.random()*4)+".gif"); // 注意四个雪花文件的文件名及目录地址
 this.el.style.position = "absolute";
 this.el.style.display = "block";
 this.el.style.zIndex = "99999";
 this.parent.appendChild(this.el)
 },
 move: function() {
 if (this.angle < this.minAngle || this.angle > this.maxAngle)
 this.angleDelta = -this.angleDelta;
 this.angle += this.angleDelta;
 this.left += this.speed * Math.cos(this.angle * Math.PI);
 this.top -= this.speed * Math.sin(this.angle * Math.PI);
 if (this.left < 0) this.left = this.maxLeft;
 else if (this.left > this.maxLeft) this.left = 0
 },
 draw: function() {
 this.el.style.top = Math.round(this.top) + "px";
 this.el.style.left = Math.round(this.left) + "px"
 },
 remove: function() {
 this.parent.removeChild(this.el);
 this.parent = this.el = null
 }
 }
})();
createSnow("", 40);

注意代码中文件名及相应路径。

引入文件

使用如下代码在需要显示雪花效果的页面中进行调用。WordPress用户一般将代码添加到 header.php 或者 footer.php文件中即可,如果只想在文章页面显示,直接将代码添加到 single.php 文件中即可。

<script type="text/javascript" src="/snow/snow.js"></script>

因为需要使用的文件比较零散,这里提供下文件的下载。

蝈蝈下载面板

恭喜,此资源为免费资源,请先
注意:本站资源多为网络收集,如涉及版权问题请及时与站长联系,我们会在第一时间内与您协商解决。如非特殊说明,本站所有资源解压密码均为:blog.quietguoguo.com。
赞(0) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » 雪花飘落效果源码分享
分享到: 更多 (0)

评论 5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #2

    多写一些关于dux美化或添加一些新功能的文章

    我爱线报网   | Windows 7 | 搜狗浏览器 2.X | 9个月前 (02-23)回复
  2. #1

    小雪花是白色的,背景白色的部分效果不明显,过年要中国红,哈哈

    优质香港空间   | Windows NT | Firefox 58.0 | 9个月前 (02-22)回复
    • @ 优质香港空间 哈哈,雪花图片可以自行设计,不过一般雪花白色偏蓝感觉会比较好看。

      蝈蝈要安静     | Windows NT | Chrome 64.0.3282.167 | 9个月前 (02-22)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏