Question

我一直在使用这个脚本 http://jqueryfordesigners.com/coda-popup-bubbles/

并尝试使用此修复程序根据用户鼠标在页面上的位置定位气泡：

$([trigger.get(0), info.get(0)]).mouseover(function (e) {
  if (hideDelayTimer) clearTimeout(hideDelayTimer);
  if (beingShown || shown) {
    // don't trigger the animation again
    return;
  } else {

   // reset position of info box
    beingShown = true;
    info.css({
      top: e.pageY,
      left: e.pageX,
      display: 'block'
    }).animate({
      top: '-=' + distance + 'px',
      opacity: 1
    }, time, 'swing', function() {
      beingShown = false;
      shown = true;
    });
}

除了鼠标的e.pageY和e.pageX出现的气泡外，它还会在触发器的位置添加这些值，因为气泡绝对位于相对触发器内。

如何将气泡保留在鼠标所在的位置？

Answer 1

显示气泡后，您需要设置一些函数，例如超时，根据鼠标位置更新气泡位置。

功能：

var x,y;//to track mouse positon
function UpdatePosition(){      
   $(ID_OF_BUBBLE).css({left:x+"px",top:y+"px"});         
   setTimeout("UpdatePosition()",100);
}

你可以在这里插入：

if (beingShown || shown) {
 //SETUP timeout to a function which updates bubble's position
 setTimeout("UpdatePosition()",100);
return;

添加鼠标移动钩子以获得位置：

$(document).ready(function(){
    $().mousemove(function(e){
    x=e.pageX ;
    y=e.pageY;
    });
   .......
});

PS： - 您可能需要调整气泡的位置模式

jQuery工具提示跟随鼠标

1 个答案: