JQ实战一之烟花

Posted 2020-09-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ实战一之烟花相关的知识，希望对你有一定的参考价值。

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

技术分享

首先布局，布局很简单

<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实战一之烟花的主要内容，如果未能解决你的问题，请参考以下文章

机器学习实战应用案例100篇（十七）-烟花算法从原理到实战应用

企业运维实战--Docker三剑客一之docker-machine

慕课网实战Spark Streaming实时流处理项目实战笔记十一之铭文升级版

Netty实战一之异步和事件驱动

慕课网实战Spark Streaming实时流处理项目实战笔记二十一之铭文升级版