如何显示工具提示金球奖当鼠标停止

问题描述：

[编辑] 所以我用的JavaScript工具提示之一以下建议。如果你移动，我会得到提示，告诉你什么时候停下来，如何隐藏。唯一的问题是它的工作原理当我这样做：如何显示工具提示金球奖当鼠标停止

document.onmousemove = (function() { 
    var onmousestop = function() { 
     Tip('Click to search here'); 
     document.getElementById('MyDiv').onmousemove = function() { 
     UnTip(); 
    }; 
    }, thread; 

    return function() { 
     clearTimeout(thread); 
     thread = setTimeout(onmousestop, 1500); 
    }; 
})();

但我要的功能只适用于特定的DIV，如果我改变的第一行“的document.getElementById（‘MyDiv’）的OnMouseMove = （函数（）{”我得到一个JavaScript错误的document.getElementById（ 'MyDiv'）为空我缺少什么....？

[/编辑]

我想显示一个气球风格当用户鼠标停止在一个元素上的时间超过1.5秒，然后如果他们移动鼠标我想隐藏气球我试图使用一些JavaScript代码，我发现在第狂野。下面是我用来检测鼠标何时停止的代码：

document.onmousemove = (function() { 
    var onmousestop = function() { 
     //code to show the ballon 
     }; 
    }, thread; 

    return function() { 
     clearTimeout(thread); 
     thread = setTimeout(onmousestop, 1500); 
    }; 
})();

所以我有两个问题。一，没有人有推荐的轻量级的JavaScript气球，将显示在光标位置。两个，检测鼠标停止代码工作正常，但我很难看到如何检测到鼠标已经开始再次移动并隐藏气球。谢谢...

答

有点晚回答这个问题，但这对有需要的人有帮助。

我需要这个功能能够检测，当鼠标停止移动一定时间徘徊在一个视频时隐藏的HTML/JS播放器控制器。这是提示修改后的代码：

document.getElementById('MyDiv').onmousemove = (function() { 
    var onmousestop = function() { 
     Tip('Click to search here'); 
    }, thread; 

    return function() { 
     UnTip(); 
     clearTimeout(thread); 
     thread = setTimeout(onmousestop, 1500); 
    }; 
})();

在我而言，我有点用的jQuery选择的元素为我的球员控制器：

$('div.video')[0].onmousemove = (function() { 
    var onmousestop = function() { 
     $('div.controls').fadeOut('fast'); 
    }, thread; 

    return function() { 
     $('div.controls').fadeIn('fast'); 
     clearTimeout(thread); 
     thread = setTimeout(onmousestop, 1500); 
    }; 
})();

答

这是一个漂亮的jQuery插件，用于漂亮的浮动工具提示。

http://jqueryfordesigners.com/demo/coda-bubble.html

[编辑] 我想没有看到同伴HTML很难说什么是错的。我会仔细检查元素是否有标签中指定的相应ID。除此之外，除非这是一个学术练习，否则我会建议使用上面引用的jQuery插件之类的东西。当然还有许多其他的预建工具，它们已经处理了您当前正在处理的所有细节。

答

document.onmousemove = (function() { 
    if($('balloon').visible) { 
    //mouse is moving again 
}....//your code follows

使用Prototype.js语法，您可以确定在气球可见时鼠标移动了。

答

的jQuery插件hoverIntent提供了类似的行为。它通过检查是否将鼠标放慢移动到元素中并将一定量的时间停留在元素上来确定用户是否意指将鼠标悬停在特定元素上。

它只有当用户离开元素，这听起来并不像你寻找什么，但代码是很简单的火灾“走出去”的事件。

同时还要注意结合东西鼠标移动时，你不需要将收集的事件，鼠标移动迅速激发了很多活动，并可以对你的网站的性能产生严重影响。当光标进入活动元素时，hoverIntent只绑定mousemove，之后解除绑定。

如果你尝试hoverIntent我有一些麻烦缩小的版本不触发“走出去”的事件，所以我会建议使用完整，unminified源。

如何显示工具提示金球奖当鼠标停止

相关推荐