首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

用js代码和插件实现wordpress雪花飘落效果的四种方法

Posted in Javascript onDecember 15, 2014

冬天到了，很多的博客空间都加了雪花的效果，于是去看了看他们的效果实现。有好几个效果代码，就拿过来了，有需要的朋友可以拿过去试试看。

雪花大图片：

用js代码和插件实现wordpress雪花飘落效果的四种方法

效果代码一

<script type="text/javascript" language="javascript">
(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() * 5 + 5;
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 + "雪花图片的绝对链接地址");
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);
</script>

将以上面代码直接复制粘贴到主题中的Header或者Footer文件中，如果你只想让文章页面显示，那就直接添加到single就可以了。 下面把雪花图片(所需的素材)提供给大家，用js代码和插件实现wordpress雪花飘落效果的四种方法小图片： 需要大家上传到自己的博客的当前使用的主题中，然后把代码中的链接改成图片所在的位置即可。效果如本页面所示.

效果代码二：

<html>
<head>
<script>
function start(){
var array=new Array();
var canvas=document.getElementById("mycanvas");
var context=canvas.getContext("2d");
for(var i=0;i<50;i++){
var Showsnow=new showsnow();
array.push(Showsnow);
}
time=setInterval(function (){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<array.length;i++){
array[i].move();
array[i].draw(context);
}
},500);
}
function showsnow(){
var y=parseInt(Math.random()*50)*10;
var x=parseInt(Math.random()*80)*10;
this.draw=function(context){
context.font="50px Calibri";
context.fillText("*",x,y);
}
this.move=function(){
y+=20;
if(y>600){
y=0;
}
}
}
</script>
</head>
<body>
<input type="button" value="start" onclick="start()" />
<br/>
<canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>
</body>
</html>

这个效果演示如下（感觉比较丑，不推荐）：

效果代码三

其实实现WordPress博客飘落雪花的还可以用 let it snow 插件。

let it snow插件使用方法我就在这里不唠叨了，和其它插件安装没啥区别，可以直接去下载上传文件夹let it snow里面的文件到/wp-content/plugins/目录，然后激活此插件，在WordPress的管理面板菜单设置插件即可。或者在后头插件库里面直接搜索，也可以找到。

let it snow 官方网站：点击访问

效果代码四

在网上看到一个非常强大的SnowStorm插件。和牛逼啊，好像是google上搜let it snow会有下雪以及霜冻效果的代码，很有创意。觉得好的童鞋可以自己去官网看看。

网上找了一个简单的随机的雪花飘落效果代码分享给大家（这个效果是纯代码写的。雪花就是*。）：

稍微解释下里面的几个函数：

1、letItSnow()

就是下雪啦（这句依旧是废）。然后就调用createSnow来产生雪花。

2、createSnow()

产生雪花每个雪花都是一个<i>标签，里面放一个“*”来模拟雪花（google那个copy不下来，居然显示为空格，我了个太阳…），然后放到一个大容器叫snowBox里面，产生的个体push进iArray里面收集起来。雪花采用的是以snowBox为参照的绝对定位方式，top为0px，left就用Math.random()*window.screen.width，让雪花随机在屏幕宽度中产生。

用color来控制雪花的颜色深浅产生景深，范围在0～200之间
用fontSize来控制雪花的大小，范围在10px～15px之间
用time来控制雪花飘落的调用间隔，范围在40ms～50ms之间
用snowInterval来控制雪花产生的间隔，范围在500ms～1000ms之间

然后递归调用本身，不停产生雪花。

3、fallDown()

顾名思义就是让雪花飘落，飘落速度speed为2px，即每次纵向下降2px。这个时候做一个检测，如果雪花下降到固定高度下，即比父容器还高，那么就remove掉它，这样可以减轻浏览器的压力，要不然太多雪花会导致浏览器越走越慢，反正已经给overflow:hidden掉看不见了，眼不见为净。然后在纵向下降的同时调用个windBlow函数，让雪花下降的艺术些。

4、windBlow()

一个命名貌似风吹，其实真是风吹的效果（这话更废.哈哈.），利用一个Math.sin()来产生雪花在空中迂回飘荡的效果，这样雪花就不会单调的直线下降，而是蛇形飘落，控制好飘落的间隔，这样连续性比较好，看起来也舒服些。

function letItSnow(){
	var snowBox=document.getElementById("snowBox");
	var iArray=new Array();
	createSnow(snowBox,iArray);

}
function fallDown(temObj,iArray){
	var speed=2;
	var top=parseInt(temObj.style.top);
	if(top>510){//当到超过高度时候就删了它，减轻浏览器压力
		for(var i=0;i<iArray.length;i++){
			if(temObj==iArray[i]){
				iArray.splice(i,1);
				var snowBox=document.getElementById("snowBox");
				snowBox.removeChild(temObj);
				return false;
			}
		}
	}
	temObj.style.top=top+speed+"px";
	var wind=windBlow(temObj,top);
	temObj.style.left=parseInt(temObj.style.left)+wind*2+"px";
}
function windBlow(temObj,top){
	if(parseInt(Math.random())%2==1)
	return Math.sin(top/16);
	else return Math.cos(top/16);
}
function createSnow(snowBox,iArray){
	var temObj=document.createElement("i");
	var temText=document.createTextNode("*");
	temObj.appendChild(temText);
	temObj.style.left=parseInt(Math.random()*window.screen.width)+"px";
	temObj.style.top="0px";
	var temNum=parseInt(Math.random()*200);
	temObj.style.color="#"+temNum.toString(16)+temNum.toString(16)+temNum.toString(16);
	iArray.push(temObj);
	snowBox.appendChild(temObj);
	var temNum=0;
	while(temNum<10){
		temNum=parseInt(Math.random()*15);
	}
	temObj.style.fontSize=temNum+"px";

	var time=0;
	while(time<40){
		time=parseInt(Math.random()*50);
	}
	temObj.timer=setInterval(function(){
		fallDown(temObj,iArray);								
	},time);
	var snowInterval=0;
	while(snowInterval<500){
		snowInterval=parseInt(Math.random()*1000);
	}
	var createTimer=setTimeout(function(){
		createSnow(snowBox,iArray);	
		clearTimeout(createTimer);
	},snowInterval);
}

演示地址：http://demo.3water.com/js/2014/snow/

好了，四个效果代码到此结束。希望能帮到有需要的朋友。如果有什么问题可以在下面留言。

用js代码和插件实现wordpress雪花飘落效果的四种方法

- Author -

mdxy-dxy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 #Javascript
javascript使用call调用微信API
Dec 15 #Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 #Javascript
node.js中的console用法总结
Dec 15 #Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 #Javascript
node.js中的require使用详解
Dec 15 #Javascript
node.js中的favicon.ico请求问题处理
Dec 15 #Javascript
InputStream(1) Vue3(1) axios(1) vuex(1) HDR(1) 连接器(1) persistedstate(1) 曝光融合(1) OutputStream(1) 高动态范围(1)
You might like
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）
2016/12/02 Javascript
Bootstrap面板（Panels）的简单实现代码
2017/03/17 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
python selenium firefox使用详解
2019/02/26 Python
python获取array中指定元素的示例
2019/11/26 Python
澳大利亚领先的宠物用品商店：VetSupply
2017/09/08 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
军训 自我鉴定
2014/02/03 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
机动车交通事故协议书
2015/01/29 职场文书
音乐教师个人总结
2015/02/06 职场文书
故意伤害辩护词
2015/05/21 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
2016年安全月活动总结
2016/04/06 职场文书
2019最新版试用期劳动合同模板！
2019/07/04 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
django 认证类配置实现
2021/11/11 Python