JS实现网页烟花动画效果


Posted in Javascript onMarch 10, 2020

原生js实现放烟花效果,点击鼠标,然后向四周扩散,最后自由落体效果!最简单的方法实现!

效果图:

JS实现网页烟花动画效果

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>

更多JavaScript精彩特效分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
js调用设备摄像头的方法
Jul 19 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 #Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 #Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 #Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 #Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 #Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 #Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
webpack打包优化的几个方法总结
2020/02/10 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
Python编程中的文件操作攻略
2015/10/16 Python
利用python代码写的12306订票代码
2015/12/20 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
关键字final的用法
2013/10/02 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
驻村工作先进事迹
2014/08/14 职场文书
个人作风建设总结
2014/10/23 职场文书
办公室主任岗位职责
2015/01/31 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript