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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
js实现计时器秒表功能
Dec 16 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 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
如何删除多级目录
2006/10/09 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP反射机制用法实例
2014/08/28 PHP
PHP实现事件机制的方法
2015/07/10 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
python列表生成器迭代器实例解析
2019/12/19 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
实用的简历自我评价
2014/03/06 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
2014年国庆标语
2014/06/30 职场文书
投资入股合作协议书
2014/10/28 职场文书
2014年统战工作总结
2014/12/09 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
Python Django项目和应用的创建详解
2021/11/27 Python
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA