4顶

使用JS编写面向对象版的放烟花效果代码

稿源：互联网 2022-04-02 21:40:00 点击： 6170 撤稿纠错

手动放烟花：激活后用鼠标点击页面即可。（碎片生成范围50-100，IE范围20-30。如果快速连续点击，浏览器会扛不住，你懂的）自动放烟花：激活后看着就行了。（为了避免太卡，将烟花生成的碎片范围减小到20-30）

以下讨论的是和面向对象烟花相关的使用JS编写面向对象版的放烟花效果代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>阿里西西特效演示_放烟花效果（面向对象版）</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">提供演示：js.alixixi.com，建议使用Firefox, Chrome浏览器预览效果. 如蒙转载请注明出处 <a href="http://js.fgm.cc">Fgm.cc</a> , By — Ferris, QQ:21314130</div>
</body>
</html>

关于使用JS编写面向对象版的放烟花效果代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011092173992.shtml方便下次再访问哦。

·上一篇： 三个单选题每题必须选一个答案的表单特效代码
·下一篇： 鼠标移动到左侧产品分类对应输出显示右侧div内容区域

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

使用JS编写面向对象版的放烟花效果代码

文章分类LIST >>返回首页

最新游戏

最新新闻