jQuery 鼠标拖动五彩圆圈效果复制完整代码即可马上调用

jQuery实现鼠标拖拽效果代码实例

原创已于 2023-09-26 23:17:38 修改 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端 #代码实例 #鼠标拖拽效果

于 2022-07-06 06:05:46 首次发布

前端开发代码实例专栏收录该内容

11 篇文章

订阅专栏

该博客分享了使用jQuery实现鼠标拖拽效果的代码实例。首先介绍准备工作，需引入jQuery库，准备五张色环图片放入指定文件夹。接着展示了css代码和jQuery代码，最后呈现了实现的效果，鼓励大家交流学习。

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注

在这里插入图片描述
咱们废话不多说直接上代码!

准备工作

首先引入jquery库

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

没有这个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' οndragstart='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");
   })
})