javascript实现下雪效果(实例代码)_

《javascript实现下雪效果(实例代码)_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、javascript实现下雪效果(实例代码)_下面我就为大家带来一篇javascript实现下雪效果【实例代码】。我觉得挺不错的，现在分享给大家，也给大家做个参考原理:1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。2、js猎取创建的DIV并转变其top属性值，当下落的高度大于屏幕高后删除该移动div3、似乎不够完善勿喷HTML代码：!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title雪花飘舞/titlelinkrel="stylesheet"href="css/index.css"scr

2、iptsrc="js/move.js"/script/headbodydivclass="snow_parent"id="js_sonw"/div/body/htmlCSS代码:*{margin:0;padding:0;list-style:none;border:none;}body{width:100%;height:600px;background:#000;}.snow_parent{position:relative;width:100%;height:100%;overflow:hidden;margin:0auto;}.snow_parentdiv.paren

3、t{background-image:url(../img/snow.png);float:left;-webkit-transform:scale(.1);-moz-transform:scale(.1);-o-transform:scale(.1);-ms-transform:scale(.1);transform:scale(.1);position:absolute;}.snow_one{width:180px;height:180px;background-position:00;background-repeat:no-repeat;left:-70px;top

4、:-95px;}.snow_two{width:140px;height:140px;background-position:-220px-18px;left:-30px;top:-75px;}.snow_three{width:150px;height:150px;background-position:-400px-15px;left:-20px;top:-80px;}.snow_four{width:160px;height:160px;background-position:-10px-206px;}.snow_four{left:-10px;top:-85px;}

5、JS代码:/*creatByjiucheng2021-4-24*/window.onload=function(){init();}//创建DIVfunctioncreatDiv(){//创建DIV并追加到父元素varsnowDiv=document.createElement("div");document.getElementById("js_sonw").appendChild(snowDiv);//让创建DIV的class为随机，显示不同的雪花varwhatName=["snow_oneparent","snow_twoparent","snow_threepare

6、nt","snow_fourparent"];varindex=Math.floor(Math.random()*whatName.length);snowDiv.className=whatName[index];//猎取该DIV的left属性值(随机的)并赋值给创建的DIVvarwhatLeft=getLeft()+'px';snowDiv.style.left=whatLeft;returnsnowDiv;}//猎取随机left属性值functiongetLeft(){//猎取该DIV的最大left属性值即父元素的宽度vareleParent=document.get

7、ElementById("js_sonw");//猎取父元素的全部style样式varstyle=window.getComputedStyle(eleParent);//CSS中的left是负数这里得减去下varmaxWidth=parseInt(style.width)+70;//让创建的DIV的left为随机值varrandomLeft=Math.floor(Math.random()*maxWidth);returnrandomLeft;}//让其向下移动functionmoveDown(){//猎取移动对