JQ实战一之烟花

最新推荐文章于 2024-09-30 14:28:41 发布

weixin_30265171

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量129

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hushangzhi/p/6556203.html

版权

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

首先布局，布局很简单

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

最后给烟花上色,自制的随机16进制颜色，代码可以封装直接调用。

	 function getColor(){
		 var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
		 var colorArray=colorValue.split(",");
		 var _color="#";
		 for(var i=0;i<6;i++){
			 
			 _color+=colorArray[Math.floor(Math.random()*16)]
			 
			 }
			 return _color;
		 }

转载于:https://www.cnblogs.com/hushangzhi/p/6556203.html