本次的效果大概为当用户点击网页时，网页下方弹出一个类似烟花的长条条，然后在桌面上散开以达成类似烟花的特效。话不多说先上图。
首先布局，布局很简单
<style>
body { background:#000; overflow:hidden;}
</style>
接着js部分，主要以JQ为主
<body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).click(function(e){
var _div=$("<div></div>");
_div.css({width:"4px",height:"30px",backgroundColor:"red",position:"absolute"});
$("body").append(_div);
var t=$(window).height();
var l=e.clientX;
var g=e.clientY;
var m=$(window).width();
var Timer=[];
_div.css({top:t,left:l});
_div.animate({top:g},300,function(){
_div.remove();
var i=0;
var sp_div=[];
for(i=0;i<50;i++){
sp_div[i]=$("<div></div>");
sp_div[i].css({width:"2px",height:"2px",position:"absolute",top:g,left:l,backgroundColor:"green"});
$("body").append(sp_div);
sp_div[i].speedX=Math.random()*20-10;
sp_div[i].speedY=Math.random()*20-10;
}
setInterval(function(){
var j=0;
for(j=0;j<50;j++){
if(!sp_div[j]) continue; //跳过当前这个，继续下一个
sp_div[j].css({left:sp_div[j].position().left+sp_div[j].speedX,top:sp_div[j].position().top+sp_div[j].speedY});
sp_div[j].speedY=sp_div[j].speedY+1;
if(sp_div[j].position().top>t || sp_div[j].position().left<0 || sp_div[j].position().left>m ){
sp_div[j].remove();
sp_div[j]=null;
}
}
},30)
});
});
});
</script>
最后给烟花上色和添加声音
时间： 2024-08-25 20:30:45