奈寻味导航网 » 文章资讯 » jQuery实现鼠标拖动图片功能

jQuery实现鼠标拖动图片功能

2023-07-04 19:35:03 286

本例利用jQuery实现一个鼠标托动图片的功能。

首先设一个wrapper，wrapper内的坐标即图片移动的坐标

#wrapper{
width:1000px;
height:1000px;
position:relative;
}

设置图片div，这个div即要拖动的div

#div1{
position:absolute;
left:0px;
top:0px;
width:300px;
height:200px;
background:url("d:/Pictures/Earth.jpg");
background-size:contain;
}

上面设置了wrapper的定位为relative，div1的定位为absolute。

接下来设计拖动的算法：

思路如下：

1.鼠标点下时让div跟随鼠标移动

2.鼠标松开时停止跟随

首先需要一个函数，他会将该div的坐标改变为当前鼠标的位置：

首先需要定义几个变量，保存当前鼠标的坐标以及图片的坐标

vartimer;
varmouseX=0;
varmouseY=0;
varpic_width=parseInt($("#div1").css("width"));
varpic_height=parseInt($("#div1").css("height"));

那么现在就需要为wrapper添加一个事件监听器，鼠标在wrapper中移动时，修改变量mousex，mousey的值

$("#wrapper").mousemove(function(e){
mouseX=e.clientX;
mouseY=e.clientY;
});

编写follow函数，并用计时器调用它

$("#div1").mousedown(function(){
timer=setInterval(follow,10);
});
$("#div1").mouseup(function(){
clearInterval(timer);
});
varfollow=function(){

$("#div1").css("left",mouseX-pic_width/2);
$("#div1").css("top",mouseY-pic_height/2);
};

完整代码如下所示：






#wrapper{
width:1000px;
height:1000px;
position:relative;
background:linear-gradient(lightblue,white);
font-size:40px;
}
#div1{
position:absolute;
left:0px;
top:0px;
width:300px;
height:200px;
background:url("d:/Pictures/Earth.jpg");
background-size:contain;
}




Lorem,ipsumdolorsitametconsecteturadipisicingelit.Impeditnumquamaccusamusexplicabopraesentiumlaudantiumetaccusantium,abipsum,excepturinecessitatibusquosisteadquidelenitiseddebitisreiciendisquamnisi.

最终效果：

到此这篇关于jQuery实现鼠标拖动图片功能的文章就介绍到这了,更多相关jQuery鼠标拖动图片内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现鼠标拖动图片功能

热门推荐

随机推荐