验证中...
Languages: JavaScript
Categories: JavaScript 工具
Latest update 2019-07-01 20:20
ScarecrowSnow.js
Raw Copy
//雪花特效
function ScarecrowSnow (nodeId, width, height, snowNum) {
if (nodeId == undefined) {
throw new Error("ScarecrowSnow obj must parameter 1:nodeId");
}
this.width = width || $("#" + nodeId).width();
this.height = height || $("#" + nodeId).height();
this.runkeyframesList = [];
this.runkeyframesListTemp = [];
this.snowNum = snowNum || 60;
this.init(nodeId, this.width, this.height, this.snowNum);
}
ScarecrowSnow.prototype = {
constructor:ScarecrowSnow,
init:function (nodeId, width, height, snowNum) {
this.initFrames(snowNum);
var style = "";
for (var i in this.runkeyframesList) {
style += this.runkeyframesList[i]['keyframe'];
}
style += ".snow{background-color: transparent;z-index: 800;width: 100%;height: 100%;display: block;position: absolute;}";
style +=".snow > .snowBall{display: block;background: radial-gradient(white 5%, transparent 60%, transparent 100%);position: absolute;}";
$('<style></style>').text(style).appendTo('head');
this.startAnimation(nodeId, snowNum);
},
/**
* 获取一个随机数
* @param min
* @param max
* @returns {number}
*/
getRandomNumber:function (min, max) {
min = min || 0;
max = max || 1920;
return Math.floor(Math.random()*(max-min+1)+min);
},
/**
* 初始化所有动画
* @param num
*/
initFrames:function (num) {
while (num > 0) {
var startLeft = this.getRandomNumber(0, this.width);
var startTop = -this.getRandomNumber(0, this.height / 3);
var endLeft = this.getRandomNumber(0, this.width);
var endTop = this.getRandomNumber(this.height / 3 * 2, this.height);
var moveTime = this.getRandomNumber(2, 30);
var startOpacity = this.getRandomNumber(6, 10) / 10;
var endOpacity = 0;
var name = 'ScarecrowSnow' + this.getRandomNumber(0, 100000);
var runkeyframes ='@keyframes '+ name +'{0%{left: '+ startLeft +'px;top: '+ startTop +'px;opacity: '+ startOpacity +';}100%{left: '+ endLeft +'px;top: '+ endTop +'px;opacity: '+ endOpacity +';}}';
var obj = {
name:name,
keyframe:runkeyframes,
time:moveTime
};
this.runkeyframesList.push(obj);
num--;
}
},
/**
* 初始化所有球
* @param num
*/
initAllBall:function (num, parentId) {
while (num > 0) {
this.createBall('Scarecrow' + this.getRandomNumber(0, 100000), parentId);
num--;
}
},
/**
* 绘制一个新的球
* @param id
* @param parentId
*/
createBall:function (id, parentId) {
var widths = this.getRandomNumber(5, 30);
var div = "<div id='"+ id +"' class='snowBall' style='width: "+widths+"px;height:"+ widths +"px;border-radius: "+ widths / 2 +"px;opacity:0;'></div>";
$(div).appendTo("#" + parentId);
this.startDivAnimation(id);
},
/**
* 移除一个小球
* @param id
*/
removeDiv:function (id) {
this.createBall('Scarecrow' + this.getRandomNumber(100000, 99999999), $("#" + id).parent().attr('id'));
$("#" + id).remove();
},
/**
* 开始一个小球动画
* @param id
*/
startDivAnimation:function (id) {
var aniObj = this.runkeyframesList.pop();
if (!aniObj) {
this.runkeyframesList = this.runkeyframesListTemp;
this.runkeyframesListTemp = [];
aniObj = this.runkeyframesList.pop();
}
this.runkeyframesListTemp.push(aniObj);
$("#" + id).attr('style', $("#" + id).attr('style') + ';animation: '+aniObj['name'] + " " + aniObj['time'] + "s;");
setTimeout(function () {
this.removeDiv(id);
}.bind(this), aniObj['time'] * 1000);
},
/**
* 开始所有动画
* @param id
* @param num
*/
startAnimation:function (id, num) {
$("#" + id).addClass('snow');
this.initAllBall(num, id);
}
};
window.ScarecrowSnowShow = function (nodeId, width, height, snowNum) {
$(function () {
new ScarecrowSnow(nodeId, width, height, snowNum);
});
}
test.html
Raw Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="./ScarecrowSnow.js"></script>
</head>
<body>
<div style="width: 300px;height: 400px;background-color: dimgrey;display: block;left: 500px;" id="test1"></div>
<script>
ScarecrowSnowShow('test1');
</script>
</body>
</html>

Comment list( 0 )

You need to Sign in for post a comment

Help Search