您的位置：首页 > Web前端

前端小练——雪花特效插件

2016-07-14 22:44 316 查看

闲来无事，写写Js练练手，今天做了一个简单版的雪花特效背景插件，与大家分享下。

这里给出几个思路步骤及相应代码：

首先，我们要写一个雪花标本并隐藏，这里引入了jquery库，如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>snowy</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
body{
background:url("img/town2.jpg");
}
</style>
</head>
<body>
<img  speed="slow"  size="small"  style="display:none;position:absolute;z-index:1001;" />
</body>
</html>

　你可以设置<img>标签里的 speed和size属性，speed："slow,normal,fast"; size:"small,normal,big“。分别表示雪花的速度和大小。

然后，我们需要一个生产雪花标本的类。

在此之前，我们应该知道，雪花产生时其初始的横坐标位置应当是随机的，所以这里先提供了一个生产随机位置的函数：

var snowyPic=$("img").eq(0); //雪花标本

//雪花位置随机数
function randomAt(){
var widthPos = Math.random().toString().slice(0,5);
widthPos =widthPos*1000;
if(widthPos >= $(window).width()) widthPos=$(window).width()-100;
return widthPos;
}

//生产雪花标本
function snowyCreate(speed,size){
this.speed=speed; //雪花速度
this.pos_x=randomAt();  //横坐标
this.pos_y=0;  //纵坐标

var self=this;
this.create=function(){
var random=Math.random()+Math.random();
random=random.toString().slice(2,9);  //id有长度限制
$("body").append("<img src='img/snow.png' id= '"+random+"'/>");
var _star=$("#"+random);
if(size === "normal"){ var snowySize="60px";}
else if(size === "small"){ var snowySize="30px";}
else if(size === "big"){var snowySize="90px";}
_star.css({width:snowySize});
_star.offset({left:this.pos_x,top:this.pos_y});
return _star;
};

//下落
this.drift=function(domOb){

var _star=domOb;
var drop=setInterval(function(){
//self.pos_x=self.pos_x + Math.random()*50;
self.pos_x=self.pos_x + 20;
self.pos_y=self.pos_y +40;
var _option={
left: self.pos_x,
top: self.pos_y,
};
if(_star.offset().top <= $(window).height()-100 && _star.offset().left <= $(window).width()-100){
_star.offset(_option);

}
else {
_star.remove();
clearInterval(drop);
}
},self.speed);
} ;

this.drift(this.create());
}

　在上面这段代码中，我把雪花下落的行为函数放在了生产雪花的类中，并借用new()实例重新开辟新上下文并执行函数体的机制把生产create()后的雪花实例当作参数衔接到drift()函数中，实现雪花产生并带有下落动作。

最后，我提取了雪花标本里设置的参数们并放到options对象中，在最后读取各参数渲染。

//提取参数
var options={
speed:function(){
if(snowyPic.attr("speed") ==="slow") return 100;
else if(snowyPic.attr("speed") === "normal") return 75;
else if(snowyPic.attr("speed") === "fast") return 50;
else {alert("格式设置有误！"); clearInterval(produce);}
},
size:snowyPic.attr("size")
};

//测试
var produce= setInterval(function(){
var snowy = new snowyCreate(options.speed(),options.size);
},250);

　具体的代码和文件完整的包在github上：https://github.com/Johnharvy/snowy-plugin。

如果您有点兴趣，点个赞给我点鼓励吧！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航