下雪效果
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 #box { 7 width: 1000px; 8 height: 600px; 9 background: #000000;10 女生潮流短发发型 border: 元宵节北京哪里好玩5px solid red;11 margin: 20px auto;12 position: relative;13 }14 img{15 position: absolute;16 }17 </style>18 19 <body>20 <div id="box"></div>21 </body>22 </html>23 <script src="public.js"></script>24 <script>25 /*26 分析构造函数 snow27 属性 ： img box28 方法 ： 雪花创建init 移动29 */30 window.onload = function(){31 tinterval( function(){32 new snow().init().move();33 },800 )34 }35 function snow(){36富豪的遗产 this.img = document.createelement("img");37 this.box = $id("box");38 this.init = function(){//雪花创建39 this.img.src = "img/snow.png";40 this.box.appendchild( this.img );41 this.img.width=this.img.height = rand(10,15);42 this.img.style.left = rand(0,this.box.offtwidth-this.img.offtwidth) + "px";43 this.img.style.top = -this.img.offtheight+"px";44 return this;45 }46 this.move = function(){47 //定义雪花移动的速度48 var speedx = -rand(1,5);49 var speedy = rand(1,5);50 this.timer = tinterval( function(){51 陶斯之声 this.img.style.left = this.img.offtleft + speedx + "px";52 this.img.style.top = this.img.offttop + speedy + "px";53 if( this.img.offtleft < -this.img.offtwidth || this.img.offttop > this.box.offtheight ){54 //clearinterval( this.timer );55 this.img.remove();56 }57 }.bind(this),30 )58 }59 }60 </script>public.js
function $id(id){//给我一个id名，返回一个这个id的元素 return document.getelementbyid(id);}//求随机数function rand(min,max){ return math.round(math.random()*(max - min) + min);}//随机的16进制颜色function getcolor(){ var str = "0123456789a岳飞的满江红bcdef";//十六进制字符串 var color = "#"; for(var i = 0; i <= 5; i++){//取6个数 color += str.charat(rand(0,15)); //rand(0,15)随机0-15之间的数，作为charat()的下标，取出下标对应的字符 } return color;}function zero(val){ return val < 10 ? "0" + val : val;}//时间差function diff(start,end){//2000-2018 2018 - 2000 //console.log(start.gettime()); return math.abs(start.gettime() - end.gettime())/1000;}雪花图片（下方）
本文发布于:2023-04-03 09:30:26，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/f7872601b4290b0d796c0d21f164e2f6.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：下雪效果.doc
本文 PDF 下载地址：下雪效果.pdf
| 留言与评论（共有 0 条评论） |
