「📖 作者：极客小俊」
「💡 把逻辑思维转变为代码的技术博主」



咱们废话不多说直接上代码!

准备工作

首先引入jquery库

jquery-1.11.3.min.js"

没有这个jquery库的朋友自行到官网下载就可以了!😃😃😃

然后再准备 五张色环图片放入到你的demo案例下的img文件夹,  图片你也可以用其他类似的图来代替也是可以的!😃😃 如图

代码部分😃

css代码 ✍️

*{
   padding:0px;
   margin:0px;
}
body{
   background:#000;
}
img{
   width:50px;
   height:50px;
   position: absolute;
   top:0px;
   left:0px;
}

jQuery代码✍️

$(function(){
   var index=0;
  $(document).mousedown(function(){
      $(this).bind('mousemove',function(e){
          index++;
           var X=e.clientX;
           var Y=e.clientY;
           var num=Math.floor(index/5)%5;
           console.log(num)
          var $img=$("<img src='img/"+num+".png' ondragstart='return false' style='top:"+(Y-25)+"px;left:"+(X-25)+"px;'/>")
          $("body").append($img);
          $img.animate({
              'width':0,
              'height':0
          },1000,function(){
              $(this).remove();
          })
         
      })
  }).mouseup(function(){
      $(this).unbind("mousemove");
  })
})

最后效果❤️

如图

大家的支持就是我坚持的动力!

如果文章对你有帮助的话就请

 👍点赞 ✍️评论 💙收藏

一键三连哦！

如果以上内容有任何错误或者不准确的地方，🤝🤝欢迎在下面 👇 留个言指出!

或者你有更好的想法，欢迎一起交流学习❤️❤️❤️❤️❤️