Question

所以这里是我想要实现的目标的链接：semplice 当鼠标悬停在计划上时，框跟随鼠标。我正在尝试重现同样的事情。

这是我到目前为止所做的，这是一个小型演示，我知道它并没有接近实际网站上的样子：

HTML：

<div class="centerdiv">
<div class="container">
<div id="follow"></div>
</div></div>

的CSS：

#follow{
position : relative;
background-color : grey;
width:75px;
height:150px;
}

.centerdiv {
width:150px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.container
{
width:150px;
height:150px;   
position:absolute;
top:0;
left:0;
overflow:hidden;
border:1px solid #000000;
}

JS：

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$('.container').mousemove(function(e){
$("#follow").show();
var offset = $('.container').offset();
console.log(e);
mouseX = Math.min(e.pageX - offset.left, limitX);
mouseY = Math.min(e.pageY - offset.top, limitY);
if (mouseX < 0) mouseX = 0;
if (mouseY < 0) mouseY = 0;
});

$('.container').mouseleave(function() {
$("#follow").hide(); 
});    


var follow = $("#follow");
var xp = 0, yp = 0;
var loop = setInterval(function(){
xp += (mouseX - xp) / 5;
yp += (mouseY - yp) / 5;
follow.css({left:xp, top:yp});

}, 30);

jsfiddle demo

请有人指导我正确的方向

提前谢谢！

Answer 1

首先，您应该将DIV height:100%;设置为Semplice 之后，为了在元素中心设置鼠标位置，你应该计算DIV宽度并将其作为半边距 - 左侧

var halfwidth = ($("#follow"))/2;
$("#follow").css('margin-left',halfwidth);

我希望我明白这一点：）

如何让div跟随鼠标？

1 个答案: