这篇文章将为大家详细讲解有关JS如何实现网页烟花动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
十载的万安网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同,自动调整万安建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“万安网站设计”,“万安网站推广”以来,每个客户项目都认真落实执行。
效果图:
CSS代码:
*{ padding: 0px; margin: 0px; background: #000; } .firworks{ width: 6px; height: 6px; position: absolute; }
js代码:
<script type="text/javascript"> //封装一个颜色随机的效果 function randomColor(){ var color = "rgb(" var r = parseInt(Math.random()*256); var g = parseInt(Math.random()*256); var b = parseInt(Math.random()*256); color = color+r+","+g+","+b+")"; return color; } //创建一个制造烟花的构造函数,第一个参数为元素,第二参数为初始x轴位置,第三参数为y轴位置。 function Fireworks(Div,x,y){ Div.style.backgroundColor=randomColor(); //给烟花添加背景色 Div.className="firworks"; //添加一个class document.body.appendChild(Div); Div.style.left=x+"px"; //把鼠标点击坐标给div Div.style.top=y+"px"; var speedX = (parseInt(Math.random()*2) == 0 ? 1 : -1)*parseInt(Math.random()*16 + 1); //三目运算符随机移动方向,概率50%,为1时往正方向移动,负1时往反方向移动第二个随机数随机速度快慢 var speedY = (parseInt(Math.random()*2) == 0 ? 1 : -1)*parseInt(Math.random()*20 + 1); this.move=function(){ var i = 3; var time1=setInterval(function(){ i++; Div.style.left=Div.offsetLeft+speedX+"px"; Div.style.top=Div.offsetTop+speedY+i+"px"; //当i+speedY>0时,烟花朝下运动。 if(Div.offsetLeft+Div.offsetWidth>window.innerWidth|| Div.offsetLeft<2 || Div.offsetTop+Div.offsetHeight>window.innerHeight || Div.offsetTop<2 ){ Div.remove(); //移动出可视区域记得删除div和清除定时器 clearInterval(time1); } },30); } } document.οnclick=function (e){ var evt=e||window.event; //兼容性处理 for(var i=0;i<80;i++){ //随机烟花的数量 var div=document.createElement("div"); var b=new Fireworks(div,evt.pageX,evt.pageY); b.move(); } } </script>
关于“JS如何实现网页烟花动画效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网站标题:JS如何实现网页烟花动画效果
当前网址:https://www.cdcxhl.com/article24/gheice.html
成都网站建设公司_创新互联,为您提供、电子商务、外贸网站建设、网站建设、移动网站建设、小程序开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联