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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js放烟花效果(面向对象版)</title>
<style type="text/css">
html,body{overflow:hidden;}
body,div,p{margin:0;padding:0;}
body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
a{text-decoration:none;outline:none;}
#tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2px solid #484848;}
#tips{top:0;border-width:0 0 2px;}
#tips a{font:14px/30px arial;color:#FFF;background:#F06;display:inline-block;margin:10px 5px 0;padding:0 15px;border-radius:15px;}
#tips a.active{background:#FE0000;}
#copyright{bottom:0;line-height:50px;border-width:2px 0 0;}
#copyright a{color:#FFF;background:#7A7A7A;padding:2px 5px;border-radius:10px;}
#copyright a:hover{background:#F90;}
p{position:absolute;top:55px;width:100%;text-align:center;}
</style>
<script type="text/javascript">
var fgm = {
 on: function(element, type, handler) {
 return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
 },
 un: function(element, type, handler) {
 return element.removeEventListener ? element.removeEventListener(type, handler, false) : element.detachEvent("on" + type, handler)
 },
 bind: function(object, handler) {
 return function() {
  return handler.apply(object, arguments)
 }
 },
 randomRange: function(lower, upper) {
 return Math.floor(Math.random() * (upper - lower + 1) + lower)
 },
 getRanColor: function() {
 var str = this.randomRange(0, 0xFFFFFF).toString(16);
 while(str.length < 6) str = "0" + str;
 return "#" + str
 }
};
//初始化对象
function FireWorks() {
 this.type = 0;
 this.timer = null;
 this.fnManual = fgm.bind(this, this.manual)
}
FireWorks.prototype = {
 initialize: function() {
 clearTimeout(this.timer);
 fgm.un(document, "click", this.fnManual);
 switch(this.type) {
  case 1:
  fgm.on(document, "click", this.fnManual);
  break;
  case 2:
  this.auto();
  break;
 };
 },
 manual: function(event) {
 event = event || window.event;
 this.__create__({
  x: event.clientX,
  y: event.clientY
 });
 },
 auto: function ()
 {
 var that = this;
 that.timer = setTimeout(function() {
  that.__create__({
  x: fgm.randomRange(50, document.documentElement.clientWidth - 50),
  y: fgm.randomRange(50, document.documentElement.clientHeight - 150)
  })
  that.auto();
 }, fgm.randomRange(900, 1100))
 },
 __create__: function (param)
 {
 var that = this;
 var oEntity = null;
 var oChip = null;
 var aChip = [];
 var timer = null;
 var oFrag = document.createDocumentFragment();
 oEntity = document.createElement("div");
 with(oEntity.style) {
  position = "absolute";
  top = document.documentElement.clientHeight + "px";
  left = param.x + "px";
  width = "4px";
  height = "30px";
  borderRadius = "4px";
  background = fgm.getRanColor();
 };
 document.body.appendChild(oEntity);
 oEntity.timer = setInterval(function() {
  oEntity.style.top = oEntity.offsetTop - 20 + "px";
  if(oEntity.offsetTop <= param.y) {
  clearInterval(oEntity.timer);
  document.body.removeChild(oEntity);
  (function() {
   //在50-100之间随机生成碎片
   //由于IE浏览器处理效率低, 随机范围缩小至20-30
   //自动放烟花时, 随机范围缩小至20-30
   var len = (/msie/i.test(navigator.userAgent) || that.type == 2) ? fgm.randomRange(20, 30) : fgm.randomRange(50, 100)
   for (i = 0; i < len; i++) {
   oChip = document.createElement("div");
   with(oChip.style) {
    position = "absolute";
    top = param.y + "px";
    left = param.x + "px";
    width = "4px";
    height = "4px";
    overflow = "hidden";
    borderRadius = "4px";
    background = fgm.getRanColor();
   };
   oChip.speedX = fgm.randomRange(-20, 20);
   oChip.speedY = fgm.randomRange(-20, 20);
   oFrag.appendChild(oChip);
   aChip[i] = oChip
   };
   document.body.appendChild(oFrag);
   timer = setInterval(function() {
   for(i = 0; i < aChip.length; i++) {
    var obj = aChip[i];
    with(obj.style) {
    top = obj.offsetTop + obj.speedY + "px";
    left = obj.offsetLeft + obj.speedX + "px";
    };
    obj.speedY++;
    (obj.offsetTop < 0 || obj.offsetLeft < 0 || obj.offsetTop > document.documentElement.clientHeight || obj.offsetLeft > document.documentElement.clientWidth) && (document.body.removeChild(obj), aChip.splice(i, 1))
   };
   !aChip[0] && clearInterval(timer);
   }, 30)
  })()
  }
 }, 30)
 }
};
fgm.on(window, "load", function() {
 var oTips = document.getElementById("tips");
 var aBtn = oTips.getElementsByTagName("a");
 var oFireWorks = new FireWorks();
 fgm.on(oTips, "click", function(event) {
 var oEvent = event || window.event;
 var oTarget = oEvent.target || oEvent.srcElement;
 var i = 0;
 if(oTarget.tagName.toUpperCase() == "A") {
  for(i = 0; i < aBtn.length; i++) aBtn[i].className = "";
  switch(oTarget.id) {
  case "manual":
   oFireWorks.type = 1;
   break;
  case "auto":
   oFireWorks.type = 2;
   break;
  case "stop":
   oFireWorks.type = 0;
   break;
  }
  oFireWorks.initialize();
  oTarget.className = "active";
  oEvent.stopPropagation ? oEvent.stopPropagation() : oEvent.cancelBubble = true
 }
 });
});
fgm.on(document, "contextmenu", function(event) {
 var oEvent = event || window.event;
 oEvent.preventDefault ? oEvent.preventDefault() : oEvent.returnValue = false
});
</script>
</head>
<body>
<div id="tips"><a id="manual" href="javascript:;">手动放烟花</a><a id="auto" href="javascript:;">自动放烟花</a><a id="stop" href="javascript:;">停止放烟花</a></div>
<p>由于浏览器渲染能力有限, 当浏览器为IE或选择自动放烟花时, 随机生成的烟花碎片范围自动调整至20-30</p>
<div id="copyright">建议使用Firefox, Chrome浏览器预览效果. By — Ferris, QQ:21314130</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

(0)

相关推荐

  • 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

  • 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烟花背景效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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基于VML技术实现的五角星礼花效果代码

    本文实例讲述了JS基于VML技术实现的五角星礼花效果代码.分享给大家供大家参考,具体如下: 这里演示的五角星礼花,基于HTML+js+VML技术共同编写实现,打开页面即可看到礼花绽放效果,五角星符号可以换成其它的符号,本效果可轻松修改成烟花升空爆炸特效,不过你要事先制作一个烟花的GIF小图,然后替换掉五角星. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-vml-wjx-style-demo/ 具体代码如下: <HTML> <HE

  • 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创建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

  • 原生Js实现简易烟花爆炸效果的方法

    本文实例讲述了原生Js实现简易烟花爆炸效果的方法.分享给大家供大家参考.具体分析如下: 实现原理: 在一定范围内,随机生成一些div,形成烟花效果 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js烟花效果</title> <script type="text/javascript"> d

  • 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

  • 基于Html+CSS+JS实现手动放烟花效果

    目录 效果展示 实现代码 Html Css JavaScript 雷迪森安的乡亲们,欢迎来到老实人的前端课堂,上次写了一个新春小盲盒,这大过年的,我把烟花都给你们准备好了,今天我们来写个小烟花吧. 效果展示 注意看有两种模式哦,可以自由切换,鼠标点哪里哪里有烟花,还可以自动放烟花 视频演示:html+css写一个烟花,源码请你直接拿走! 实现代码 Html <div id="tips"> <a id="manual" href="java

  • JS基于面向对象实现的选项卡效果示例

    本文实例讲述了JS基于面向对象实现的选项卡效果.分享给大家供大家参考,具体如下: 中间过渡环节:把面向过程的程序,改写成面向对象的形式 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 input {background:#CCC;} #div1 .active {background:yellow;} #div1 div {width:200px; height:200

  • js基于面向对象实现网页TAB选项卡菜单效果代码

    本文实例讲述了js基于面向对象实现网页TAB选项卡菜单效果代码.分享给大家供大家参考.具体如下: 这是一款自动的网页TAB,基于面向对象的选项卡菜单,由于时间关系只做了简单的实现,界面没有美化,不多做介绍了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • JS实现放烟花效果

    本文实例为大家分享了JS实现放烟花效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放烟花--欣欣博客</title> <style> html,body{overflow:hidden;} body,div,p{margin:0;padding:0;} body{background:#00

  • JS基于面向对象实现的拖拽库实例

    本文实例讲述了JS基于面向对象实现的拖拽库.分享给大家供大家参考.具体如下: 这是一个面向对象的JS拖拽库,可设置水平锁定.垂直锁定.锁定位置.锁定范围等,设定这些范围后,只能在设定的模式下拖动,我觉得这是个挺不错的拖拽实例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-draw-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

  • JS基于面向对象实现的拖拽功能示例

    本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit

  • JS基于面向对象实现的多个倒计时器功能示例

    本文实例讲述了JS基于面向对象实现的多个倒计时器功能.分享给大家供大家参考,具体如下: 运行效果图如下: 实现代码如下: 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • JS基于Mootools实现的个性菜单效果代码

    本文实例讲述了JS基于Mootools实现的个性菜单效果代码.分享给大家供大家参考,具体如下: 这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools.1.11.js一并下载到本地.注意,如果看不到效果请刷新网页. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mootools-style-menu-codes/ 具体代码如下: <!DOCTY

  • JS基于Ajax实现的网页Loading效果代码

    本文实例讲述了JS基于Ajax实现的网页Loading效果代码.分享给大家供大家参考,具体如下: 这是一款很不错的网页Loading效果,常用于Ajax交互式网页设计中,点击按钮即可弹出Loading框,若Loading框未加载完成时关闭网页,会弹出确认提示框,用于一些对安全性能要求高的网页交互处理中,比如付款操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ajax-web-loading-style-codes/ 具体代码如下:

随机推荐