jQuery div只跟随光标在另一个div内的移动 [英] jQuery div that follows cursor movement only within another div

问题描述

我想要能够有一个div，当鼠标在div内，我得到一个小的圆形标记光标旁边。当我移动到这个div之外时，光标标记被删除并被隐藏。

我已经找到了一个我想要但不完全是我需要的例子： -

http://jsfiddle.net/3964w/3/ p>

上面的问题：
- 我只希望黄色标记出现在里面的div
- 当im外面的div标记隐藏和光标正常。
- 当我移动鼠标时，标记距离光标太远

任何想法？

  var mouseX = 0，mouseY = 0，limitX = 150-15，limitY = 150-15; 
 $（window）.mousemove（function（e）{
 mouseX = Math.min（e.pageX，limitX）; 
 mouseY = Math.min（e.pageY，limitY）; 
}）; 
 
 //缓存选择器
 var follower = $（＃follower）; 
 var xp = 0，yp = 0; 
 var loop = setInterval（function（）{
 // change 12 to alter damping higher is slow 
 xp + =（mouseX  -  xp）/ 12; 
 yp + = mouseY  -  yp）/ 12; 
 follower.css（{left：xp，top：yp}）; 
 
}，30）; 
  

感谢

解决方案

不能使用css吗？像这样： http://jsfiddle.net/felipemiosso/3964w/30/ p>

在 #follower 上添加 display：none; 一个新样式 .centerdiv：hover #follower {display：block; } c>

要在光标停止时获取指针，请添加 margin-left：-8px; margin-top：-8px; 到 #follower 。

更新小提琴 http://jsfiddle.net/felipemiosso/3964w/35/

更新了小提琴2 http://jsfiddle.net/felipemiosso/3964w/41/

I want to be able to have a div which when the mouse is inside that div i get a small circular marker next to the cursor. When i move outside of this div the cursor marker is removed and is hidden.

I have found an example of what i want but not exactly what i need: -

http://jsfiddle.net/3964w/3/

Issues with the above: - I only want the yellow marker to appear when im inside that div - When im outside that div the marker is hidden and cursor is normal. - The marker is too far away from the cursor when i move the mouse around

Any ideas?

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$(window).mousemove(function(e){
 mouseX = Math.min(e.pageX, limitX);
 mouseY = Math.min(e.pageY, limitY);
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 12 to alter damping higher is slower
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
follower.css({left:xp, top:yp});

}, 30);

Thanks

解决方案

Can't you use css? Something like this: http://jsfiddle.net/felipemiosso/3964w/30/

Just added display:none; on #follower and created a new style .centerdiv:hover #follower { display:block; }

To get the pointer fixed when the cursor stops, add margin-left:-8px; margin-top:-8px; to the #follower.

Updated fiddle http://jsfiddle.net/felipemiosso/3964w/35/

Updated fiddle 2 http://jsfiddle.net/felipemiosso/3964w/41/

这篇关于jQuery div只跟随光标在另一个div内的移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！