JS实现放烟花效果

网络编程 2024/11/20 佚名

3 1 2

本文实例为大家分享了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:#000;font:12px/1.5 arial;color:#7A7A7A;}
 .fire {
 width: 3px;
 height: 30px;
 background: white;
 position: absolute;
 } 
 .spark {
 position: absolute;
 width: 6px;
 height: 6px;
 }
 </style>
 <script src="/UploadFiles/2021-04-02/move.js">

move.js




/**
 * 
 * @param {Object} obj 目标对象
 * @param {Object} json 要改变的属性
 * @param {Object} extend {buffer,callback} 当buffer为true时为弹性运动
 * callback会在运动结束时，被执行
 * animate(obj, {top:500, left: 300}, {callback:function(){}, buffer: true})
 */
function animate(obj, json, extend){
 extend = extend || {};
 if(obj.isMoving){
 return;
 } else {
 stop();
 obj.isMoving = true;
 }
 //obj = Object.assgin(obj,extend);
 obj.buffer = extend.buffer;
 obj.callback = extend.callback;
 obj.timerlist = {};
 //为每一个属性添加一个定时器
 for(var attr in json){
 (function(attr){
 obj.timerlist[attr] = {speed:0};
 obj.timerlist[attr].timer = setInterval(function(){
 //首先得到当前值
 var iNow = 0;
 if(attr == "opacity"){
  iNow = getStyle(obj, attr) * 100; 
 } else {
  iNow = getStyle(obj, attr);
 }
 var speed = obj.timerlist[attr].speed;
 //根据目标值，计算需要的速度
 if(obj.buffer==true){
  speed += (json[attr] - iNow)/5;
  speed *= 0.75;
 } else {
  speed = (json[attr] - iNow)/5;
 }
 //当无限接近目标值时，停止定时器
 if(Math.abs(iNow - json[attr]) < 0.5){
  clearInterval(obj.timerlist[attr].timer);
  delete obj.timerlist[attr];
  if(getObjLength(obj.timerlist)==0){//所有定时器已停止
  stop();
  obj.callback "";
  }
 } else {
  //根据速度，修改当前值
  if(attr == "opacity"){
  obj.style.opacity = (iNow+speed)/100;
  obj.style.filter = 'alpha(opacity=' + parseFloat(iNow+speed) + ')'; 
  } else {
  obj.style[attr] = iNow+speed+"px";
  }
  obj.timerlist[attr].speed = speed;
 }
 }, 30);
 })(attr);
 }
 
 function clearTimer(){
 for(var i in obj.timerlist){
 clearInterval(obj.timerlist[i]);
 }
 }
 function getStyle(obj, attr){
 if(obj.currentStyle){
 return isNaN(parseFloat(obj.currentStyle[attr])) "_blank" href="https://www.jb51.net/Special/271.htm">Javascript菜单特效大全
javascript仿QQ特效汇总
JavaScript时钟特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,放烟花

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“JS实现放烟花效果”

暂无评论...

更新日志

2024年11月20日

JS实现放烟花效果

js模拟实现烟花特效

JS实现烟花爆炸效果

评论“JS实现放烟花效果”

更新日志

友情链接