如何讓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粘貼到光標

回答

相關問題