节日JS特效特效代码分享,圣诞节雪花特效JS代码分享

  • A+
所属分类:软件&教程

圣诞节如期而至的到来,这是在2017中12月份最后的一个节日,打开手机亦或者电脑都发现圣诞气氛的装饰品,摩拜单车早已经换上圣诞歌曲的开锁音乐,手机天猫打开页面中可以看到纷纷飘下的雪花场景,这些无不在为圣诞节日的庆祝,圣诞节或者是冬季的节日中如何为您的博客上部署上圣诞节的雪花特效呢?

  圣诞节雪花特效JS代码,感觉不错就分享下:

首先网页中的代码效果可以通过开发者工具,通常的网页浏览器都可以使用F12的按键查看源代码的效果或者使用鼠标查看网页源代码,都可以实现的把相关的代码COPY下来就号稍加的整理即可实现在网也部署圣诞节雪花特效的代码。

     网页雪花飘落JS特效
(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+"http://你的域名/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);

整个特效的实现代码如上,但是需要配合着雪花的图片来实现在网页前端看到的雪花飘下的效果的。代码下砸:

  网页部署圣诞节雪花特效JS代码操作说明

1、将文件夹中的js文件打开 修改图片链接的位置

2、将文件夹snow上传到根目录

3、在head或者footer中添加代码 <script type="text/javascript" src="http://你的域名/snow/snoa.js"></script>

4、如操作不了可咨询群主奥!

我们可以看到上面的效果是通过一段外部链接的形式实现特效的效果。在引入是一定要注意文件的路径,如若出现问题可直接的检查路径的地址是否有误。

文章发布于:2017年12月25日下午17点 ,由郑州sem阿伟博客发出。

发表评论

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