首页
所有分类
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 应用代码 方便的排序功能
Feb 06 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
javascript实现倒计时（精确到秒）
Jun 26 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
微信小程序实现锚点跳转
Nov 23 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
观后感(479) 实用文书(952) HAM-2000(1) 导游词(322) 闭幕词(9) 通知(159) 慰问信(53) AngularJS(2) 申请书(21) 文书(291)
You might like
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
JavaScript高级程序设计 阅读笔记（四） ECMAScript中的类型转换
2012/02/27 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
使用Python读取大文件的方法
2018/02/11 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Python中bisect的使用方法
2019/12/31 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Python用SSH连接到网络设备
2021/02/18 Python
Luxplus荷兰：以会员价购买美容产品等，独家优惠
2019/08/30 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
给女朋友的道歉信
2014/01/10 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
《母鸡》教学反思
2014/02/25 职场文书
会计电算化专业求职信
2014/06/10 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
python实现股票历史数据可视化分析案例
2021/06/10 Python