jsFiddle

Question

我正在尝试根据鼠标位置定位div，我设法让它工作50％。问题是DIV似乎总是远低于实际的鼠标位置，我试图减去偏移，没有运气。

基本上我想要的是垂直浮动div（jsfiddle中的NEXT链接），但是DIV应该不能超出它所在的容器（在jsfiddle中有图像的div）

这里是jsfiddle：http://jsfiddle.net/LYmVH/7/

下面是JS，它也在jsfiddle中：

$('.post-single-content').mousemove(function(e){
    var height=e.pageY,
        height1 =$('.content-top').height(); 
    $('.btnNext').css({top: (e.pageY + 50) + "px"});
});

Answer 1

您需要对父元素的顶部进行度量，因为它绝对位于其中。

尝试将您的JS更改为：

$('.post-single-content').mousemove(function(e){
    var top = (e.pageY - $(this).offset().top) + 'px';
    $('.btnNext').css({ top: top });
});

阅读一些评论后，通过使用一些基本的数学并创建“碰撞”。像这样的东西：

$('.post-single-content').mousemove(function(e){
    var y = e.pageY,  //  mouse y axis position
        tHeight = $(this).height(),  //  container height
        bHeight = $('.btnNext').height(),  //  button height
        oTop = $(this).offset().top,  //  offset top position of container
        abBot = tHeight - $('.btnNext').height(),  //  absolute top of button when at bottom
        bHalf = bHeight / 2,  //  half button height
        top = y - oTop - bHalf,  //  initial top pos of button
        bot = y - oTop + bHalf;  //  bottom of button while moving

    if (top < 0) top = 0;  //  ensure button doesn't go to far north
    else if (bot > tHeight) top = abBot;  //  ensure it cant go past south

    $('.btnNext').css({ top: top });  //  'px' not neccesary
});

根据鼠标指针更改div的位置

1 个答案:

jsFiddle