首页 > 代码库 > JQ实战一之烟花

JQ实战一之烟花

2024-09-09 02:54:28   222人阅读

本次的效果大概为当用户点击网页时，网页下方弹出一个类似烟花的长条条，然后在桌面上散开以达成类似烟花的特效。话不多说先上图。

技术分享

首先布局，布局很简单

<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>

最后给烟花上色和添加声音

JQ实战一之烟花


联系
我们