如何让Div粘贴到光标

我有一个脚本显示悬停的div并将其粘贴到光标上。如何让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/

来源

2014-09-19 Cyrill

这是你想要的吗？ http://jsfiddle.net/hj57k/2731/ – 2014-09-19 13:20:14

在小提琴上，我看到div和光标之间的距离小于1/8英寸。你在考虑'非常多的空间'是什么？你想让文本居中在光标上吗？您的网站不会为我加载（可能是我的过滤器，对不起）。 – Gavin42 2014-09-19 13:20:48

问题在于div在结构中的位置。我建议直接在＃img-container中设置div，并根据图像悬停的方式更改文本，而不是为每个图像设置一个标题div。标题的偏移现在是相对于它的父项而不是页面 – Spokey 2014-09-19 13:21:38

这里是一个不错纯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>

来源

2016-07-13 06:09:58 Cryptopat

非常感谢！ – Cyrill 2016-07-29 14:40:21

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>

来源

2014-09-19 13:20:44 himanshu

我只是浪费了一个不舒服的时间让这追逐我的鼠标 – hotforfeature 2014-09-19 13:31:16

+1的芝诺的悖论！ – 2014-09-19 13:35:49

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

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

来源

2014-09-19 13:23:09 ChernikovP

只是另一个“粘性按钮”解决方案。

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); 
 
    
 
});

#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); } 
 
}

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

来源

2015-03-11 15:20:39

如何让Div粘贴到光标

回答

相关问题