snowflake.speed = [8,10]; 速度为区间数值的随机数
setInterval(“snowflake.snowflakeAdd()”,80); 雪花飘落的频率可以自己设置
完整代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>雪花下落</title> </head> <script src="../js/jquery-1.7.2.min.js"></script> <style> *{padding: 0;margin: 0;} body,html{ background:#000; width: 100%; height: 100%; overflow:hidden; } #snowflakeBox{height:100%; position:relative;} </style> <div id="snowflakeBox"> <img src="images/christmas.jpg" style="width:100%;"> </div> <script> function snowflake(snowflakeBox) { var snowflakeThis = this; this.speed = [8,10]; //雪花下落的速度 // 定义块初始位置样式 this.draw = function(odiv) { var startPosLeft = Math.ceil(Math.random() * $(document).width());//设置雪花随机的开始x值的大小 var oOpacity = this.getRandInt(6,10)/10; //设置透明度 var oLeft = startPosLeft+'px'; var oTop = "0px"; var oColor = "#fff"; var oFontSize = this.getRandInt(12,25)+"px"; odiv.css({"opacity":oOpacity,"left":oLeft,"color":oColor,"font-size":oFontSize,"top":oTop}); } // 新增块 this.snowflakeAdd = function() { var snowflakeOne = "<div class='snowflakeItem' style='animation:snowflakeItemAnimation "+this.getRandInt(this.speed[0],this.speed[1])+"s ease-in forwards'>"; snowflakeOne += this.randIcon(); snowflakeOne += "</div>"; snowflakeBox.append(snowflakeOne); //把创建好的div放进flame中 that = snowflakeBox.children(".snowflakeItem:last-child"); this.draw(that); //执行obj的draw方法 } // 随机雪花 this.randIcon = function() { var icon = ["❅","❄","❅","❄","✽"]; return icon[this.getRandInt(0,4)]; } // 随机整数 this.getRandInt = function(start,end) { var rand = parseInt(Math.random() * (end - start + 1) + start); return rand; } return this; } $(function(){ var snowflakeBox= $("#snowflakeBox"); var snowflakeFunc = snowflake(snowflakeBox); //雪花下落的速度 snowflakeFunc.speed = [8,10]; snowflakeFunc.snowflakeAdd(); /*使用setInterval定时器每80毫秒创建一个雪花*/ setInterval(snowflakeFunc.snowflakeAdd,8); }) </script> <style> .snowflakeItem{ position:absolute; /*animation:snowflakeItemAnimation 5s ease-in forwards ;*/} @keyframes snowflakeItemAnimation { 0% {top:unset;bottom:100%;} 1% {top:unset;bottom:100%;} 100% {top:unset;bottom:-30px;opacity:0;} } </style> </html>