首页
所有分类
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 绑定事件时传递参数的实现方法
Oct 13 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
使用node.js搭建服务器
May 20 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
详解React项目如何修改打包地址（编译输出文件地址）
Mar 21 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 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
pip(1) 爬虫(2) LOGO(1) Xpath(1) 抖音(1) 字典(3) SingleFlight(2) 并发(8) Counter(1) most_common(1)
You might like
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解
2017/08/26 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
JS实现纵向轮播图（初级版）
2020/01/18 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[02:07]DOTA2新英雄展现中国元素，完美“圣典”亮相央视
2016/12/19 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
判断网页编码的方法python版
2016/08/12 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
迪斯尼商品官方网站：ShopDisney
2016/08/01 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
被告代理词范文
2015/05/25 职场文书
网络营销实训总结
2015/08/03 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python