我想制作一个 jquery 函数,“当 div 处于 mousedown 状态时跟随 div” - 因此,当鼠标移动时,当鼠标按钮按下时,我页面上的 div 跟随光标。
当鼠标按钮抬起时,div 停留在鼠标按下的最后位置。
<script src="jquery-2.0.3.min.js"></script>
<script>
var posX, posY;
$(document).on('click', mueve);
function mueve (e) {
posX = e.pageX - 20;
posY = e.pageY - 20;
$('.item').animate({left: posX, top: posY})
}
</script>
css:
.item{
background: #bbb;
height: 40px;
width: 40px;
position: absolute;
border-radius: 50%;
left: 0;
top: 0;
}
繁荣,看看这个:Fiddle http://jsfiddle.net/stA8K/1/.
这是 JavaScript:
var posX, posY, clicked = false;
function mueve (e) {
clicked = true;
posX = e.pageX - 20;
posY = e.pageY - 20;
$('.item').animate({left: posX, top: posY});
}
$(document).on('mousedown', mueve);
$(document).on('mouseup', function(e) {
clicked = false;
});
$(document).mousemove(function(e) {
if (clicked) {
$('.item').stop(true, true);
mueve(e);
}
});
我所做的是:当你点击向下时,你改变了变量clicked
为 true,因此当您移动鼠标时,它会移动带有“item”类的 div。此外,您必须在更新位置之前清除每个排队的动画。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)