JS实现放烟花效果
(编辑：jimmy 日期: 2025/10/30 浏览：3 次 )
本文实例为大家分享了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实现烟花爆炸效果
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。