全部文章-网站源码

雪花飘落效果源码

admin · 7月10日 · 2019年 · · 212次已读

雪花图片

雪花飘落效果源码

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

JS 代码

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

<pre class="wp-block-preformatted">/* 网页雪花飘落特效 */
(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);</pre>

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

引入文件

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

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

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

0 条回应
站点已稳定运行:
你的IP:
耗时 0.119 秒 | 查询 59 次 | 内存 7.30 MB