DDR爱好者之家 Design By 杰米
本文实例为大家分享了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时钟特效汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年03月29日
2024年03月29日
- 苏有朋.1994-珍惜的背包(第3张)【飞碟】【WAV+CUE】
- 《宝可梦:朱紫》“蓝之圆盘”IGN7分:性能优化仍旧灾难
- 《塞尔达传说:王国之泪》大获成功!多项年度数据表现优秀
- 应景!欧任用《塞尔达传说:王国之泪》堆雪人
- 杨采妮.1996-为所欲为(国专)【EMI百代】【WAV+CUE】
- 黎姿.1993-如果真的恋爱【华纳】【WAV+CUE】
- 朱婧汐.2024-VILLAIN反派角色【StreetVoic】【FLAC分轨】
- 《喷射战士3》最新祭典公布 1月13日举办
- NS日服年度下载榜公开:《王泪》不敌《西瓜游戏》
- 科乐美《心跳回忆GS》系列推出复刻版 2月14日登陆NS
- 林峰.2012-SELF-PORTRAIT【英皇娱乐】【WAV+CUE】
- TENSION.2004-Story新歌+精丫EMI百代】【FLAC分轨】
- 草蜢.2000-环球2000超巨星系列【环球】【WAV+CUE】
- 国行Switch开启元旦折扣!《马里奥奥德赛》7折促销
- 《塞尔达》官方账号感谢玩家支持 发布王泪最新壁纸