Question

我有一个脚本，在悬停时显示div并将其粘贴到光标上。

$(".picture_holder_thumb").mouseover(function () {
    $(".title", this).show();
});

$(".picture_holder_thumb").mouseout(function () {
    $(".title", this).hide();
});
$(document).bind('mousemove', function (e) {
    $(".title", this).css({
        left: e.pageX,
        top: e.pageY
    });
});

它有效，但不知何故，粘性 div 和光标之间总是有很大的空间。

这是我的Div的CSS：

#img-container .captioning .title {
    width: auto;
    height:auto;
    position: absolute;
    float:left;
    z-index:1;
    display: none;
}

我的JS有问题吗？我感谢任何帮助！

在这里，您可以看到问题：http://www.cyrill-kuhlmann.de/index.php/projects

这是一个例子，我得到了JS：http://jsfiddle.net/hj57k/

Answer 1

var mouseX = 0,
    mouseY = 0;

$(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
});

var follower = $("#follower");
var xp = 40, yp = 40;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 12 -1;
    yp += (mouseY - yp) / 12 -1;
    follower.css({left:xp, top:yp});

}, 30);

#follower{
    position: absolute;
    padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="follower">mouse</div>

Answer 2

这是一个很好的纯javascript ，并且可以轻松地将div粘贴到光标指针上。我们也可以删除css，并以相同的方式使用javascript完成所有样式：

document.addEventListener('mousemove', function(ev){
    document.getElementById('acab').style.transform = 'translateY('+(ev.clientY-80)+'px)';
    document.getElementById('acab').style.transform += 'translateX('+(ev.clientX-100)+'px)';            
},false);

#acab {  
transition: transform 0.23s;  
}

<div id="acab">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Anarchist_black_cat.svg/150px-Anarchist_black_cat.svg.png"></img>
</div>

Answer 3

试试这个（根据小提琴）：

$(document).bind('mousemove', function(e){
    var width = $('#tail').width()/2;
    $('#tail').css({
       left:  e.pageX-width,
       top:   e.pageY
    });
});

Answer 4

只是另一个＆＃34;粘性按钮＆＃34;溶液

＆＃13;

var xp=0, yp = 0, rx, ry, loop,
    mouseX = 0,
    mouseY = 0,
    t = $('#follower');

$(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
});

t.mousemove(function(){
    var parentOffset = $(this).offset(); 
    rx = (mouseX - (parentOffset.left))*2;
    ry = (mouseY - (parentOffset.top))*2;
    //console.log(rx+'.'+ry); 
});

t.mouseenter(function(){
   clearInterval(loop);
   loop = setInterval(function(){
        xp += ((rx-50) - xp) / 4-1;
        yp += ((ry-50) - yp) / 4-1;
        t.css({left:xp, top:yp});
    }, 30); 
    
});

t.mouseout(function(e){
     clearInterval(loop);
     loop = setInterval(function(){
         xp += (0 - xp) / 3-1;
         yp += (0 - yp) / 3-1;
         t.css({left:xp, top:yp});
    }, 30);
   
});

＆＃13;

#home{
    position: absolute;
    width:50px;
    height:50px;
    top:100px;
    left:100px;
}
#follower{
    position: absolute;
    width:50px;
    height:50px;
    background:#777;
    z-index:5;
    cursor:pointer;
    color: #fff;
    background: #00b6f4;
    border-radius: 6px;
    border-bottom: 2px solid #009dd3;
}
#follower:hover{
-webkit-animation-name: shake-little; 
  -webkit-animation-duration: 100ms;
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function: ease-in-out; 
  -webkit-animation-delay: 0s; 
  -webkit-animation-play-state: running;
}

@-webkit-keyframes shake-little { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  2% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  4% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  6% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  8% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  10% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  12% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  14% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  16% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  18% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  20% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  22% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  24% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  26% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  28% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  30% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  32% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  34% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  36% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  38% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  40% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  42% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  44% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  46% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  48% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  50% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  52% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  54% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  56% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  58% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  60% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  62% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  64% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  66% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  68% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  70% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  72% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  74% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  76% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  78% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  80% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  82% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  84% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  86% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  88% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  90% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  92% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  94% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  96% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  98% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="home"><div id="follower"></div></div>

＆＃13;

如何让Div坚持光标

4 个答案: