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克隆对象深度介绍
Nov 20 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
浅谈JavaScript作用域
Dec 06 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
2006/11/25 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
ucenter通信原理分析
2015/01/09 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
用javascript操作xml
2006/11/04 Javascript
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Django stark组件使用及原理详解
2019/08/22 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python实现石头剪刀布游戏
2021/01/20 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
财务经理岗位职责
2013/11/09 职场文书
关于旷工的检讨书
2014/02/02 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
年度评优评先方案
2014/06/03 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书