原生Js实现简易烟花爆炸效果的方法
本文实例讲述了原生Js实现简易烟花爆炸效果的方法。分享给大家供大家参考。具体分析如下：
实现原理： 在一定范围内，随机生成一些div，形成烟花效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js烟花效果</title>
<script type="text/javascript">
document.onclick=function (ev)
{
var oEvent=ev||event;
var aDiv=[];
var oDiv=null;
var _oDiv=document.createElement('div');
var i=0;
var x=oEvent.clientX;
var y=oEvent.clientY;
_oDiv.style.position='absolute';
_oDiv.style.background='red';
_oDiv.style.width='3px';
_oDiv.style.height='30px';
_oDiv.style.left=oEvent.clientX+'px';
_oDiv.style.top=document.documentElement.clientHeight+'px';
document.body.appendChild(_oDiv);
var t=setInterval(function (){
if(_oDiv.offsetTop<=y)
{
clearInterval(t);
show();
document.body.removeChild(_oDiv);
}
_oDiv.style.top=_oDiv.offsetTop-30+'px';
}, 30);
function show()
{
var oDiv=null;
for(i=0;i<100;i++)
{
oDiv=document.createElement('div');
oDiv.style.width='3px';
oDiv.style.height='3px';
oDiv.style.background='#'+Math.ceil(Math.random()*0xEFFFFF+0x0FFFFF).toString(16);
oDiv.style.position='absolute';
oDiv.style.left=x+'px';
oDiv.style.top=y+'px';
var a=Math.random()*360;
//oDiv.speedX=Math.random()*40-20;
//oDiv.speedY=Math.random()*40-20;
oDiv.speedX=Math.sin(a*180/Math.PI)*20*Math.random();
oDiv.speedY=Math.cos(a*180/Math.PI)*20*Math.random();
document.body.appendChild(oDiv);
aDiv.push(oDiv);
}
}
setInterval(doMove, 30);
function doMove()
{
for(i=0;i<aDiv.length;i++)
{
aDiv[i].style.left=aDiv[i].offsetLeft+aDiv[i].speedX+'px';
aDiv[i].style.top=aDiv[i].offsetTop+aDiv[i].speedY+'px';
aDiv[i].speedY+=1;
if(aDiv[i].offsetLeft<0 || aDiv[i].offsetLeft>document.documentElement.clientWidth || aDiv[i].offsetTop<0 || aDiv[i].offsetTop>document.documentElement.clientHeight)
{
document.body.removeChild(aDiv[i]);
aDiv.splice(i, 1);
}
}
}
};
</script>
</head>
<body style="overflow:hidden; background:black;">
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
JS基于面向对象实现的放烟花效果
本文实例讲述了JS基于面向对象实现的放烟花效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
JS画图(非VML)--兼容IE/FF
Untitled 1 .style1 { font-size: x-small; } function makedot(x,y){ //画点函数 document.write(" ") } /** 函数功能:根据给定的圆心和半径画圆 函数思路:根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标,并画出来. */ function circle(x,y,r){ //(x,y)圆心,r半径 var dotx,doty,radio; var Pi=Math.PI; makedot
-
JS基于VML技术实现的五角星礼花效果代码
本文实例讲述了JS基于VML技术实现的五角星礼花效果代码.分享给大家供大家参考,具体如下: 这里演示的五角星礼花,基于HTML+js+VML技术共同编写实现,打开页面即可看到礼花绽放效果,五角星符号可以换成其它的符号,本效果可轻松修改成烟花升空爆炸特效,不过你要事先制作一个烟花的GIF小图,然后替换掉五角星. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-vml-wjx-style-demo/ 具体代码如下: <HTML> <HE
-
js＋vml创建3D页面效果代码
v\:* { Behavior: url(#default#VML) } body{margin:0px} 向左旋转 暂停旋转 向右旋转 var q=40; var r=(q*3.1415926)/180 var v=new Array() var l=new Array() v[0]="0,400,0" v[1]="100,350,15" v[2]="200,400,0" v[3]="0,400,300" v[4]=&quo
-
VML绘图板②脚本--VMLgraph.js、XMLtool.js
脚本************** VMLgraph.js*************var xo=0;var yo=0;var ox=80;var oy=20;var dx=0;var dy=0;var drawKey = false;var itemID = 0;var ShapeItemNum = 0;var ShapeItemX = 0;var ShapeItemY = 0;var CurveItemNum = 0;var NodeDelete = false;var ToolBarNum
-
JS实现超炫网页烟花动画效果的方法
本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
-
JS烟花背景效果实现方法
本文实例讲述了JS烟花背景效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
原生Js实现简易烟花爆炸效果的方法
本文实例讲述了原生Js实现简易烟花爆炸效果的方法.分享给大家供大家参考.具体分析如下: 实现原理: 在一定范围内,随机生成一些div,形成烟花效果 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js烟花效果</title> <script type="text/javascript"> d
-
JS实现网页烟花动画效果
原生js实现放烟花效果,点击鼠标,然后向四周扩散,最后自由落体效果!最简单的方法实现! 效果图: CSS代码: *{ padding: 0px; margin: 0px; background: #000; } .firworks{ width: 6px; height: 6px; position: absolute; } js代码: <script type="text/javascript"> //封装一个颜色随机的效果 function randomColor(){
-
原生JS实现图片翻书效果
下面给大家分享基于原生js实现的图片翻书效果,具体代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS实现图片翻书效果-懒人图库</title> <META
-
原生js实现随机点餐效果
html: <div class="wrap"> <div id="box"> </div> <button id="start">开始</button> <button id="stop">停止</button> css: .wrap{ width: 500px; height: 400px; margin: 0 auto; text-ali
-
使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 "mousewheel" 事件,而 Firefox 3.5+ 中提供了一个等同的事件:"DOMMouseScroll".与mousewheel事件对应的event对象中我们还会用到另一个特殊属性-wheelDelta属性. 1."m
-
利用原生js模拟直播弹幕滚动效果
目录 1.基本原理 2.具体代码 总结 1.基本原理 首先将直播区域分成十份(我个人自己为了便于计算分成十份),将输入的内容随机放到分成的十份区域中,插入到十份区域右边的视图之外,然后调用动画,按照随机的速度从右向左移动,当移动到左侧区域视图之外移除此滚动元素. 2.具体代码 <div class="move_video_content"> <div class="video_content"> <div class="vid
-
原生JS检测CSS3动画是否结束的方法详解
本文实例讲述了原生JS检测CSS3动画是否结束的方法.分享给大家供大家参考,具体如下: 不知道大家在做网页的时候有没有碰到这种情况:当你使用CSS3的动画属性时,想要在动画结束后添加一系列操作,但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了. 针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义: 代码如下: <!DOCTYPE html> <ht
-
JS基于递归实现倒计时效果的方法
本文实例讲述了JS基于递归实现倒计时效果的方法.分享给大家供大家参考,具体如下: 效果: 事件: //发送验证码 $('.js-sms-code').click(function(){ $(this).attr("disabled", "disabled").html("<span style='color:#666'><span id='countdown'>60</span>s 后再试</span>&qu
-
JS实现淡入淡出图片效果的方法分析
本文实例讲述了JS实现淡入淡出图片效果的方法.分享给大家供大家参考,具体如下: 效果:鼠标移入时,图片由半透明逐渐变成清晰,移出时,由清晰变为半透明 分析:用变量来储存透明度,因为元素.style.alpha不能直接增加或减少 核心代码: window.onload=function(){ var oDiv=document.getElementById("div1"); var timer=null; var alpha=30; oDiv.onmouseover=function()