html中如何用js设置鼠标两秒不动，隐藏鼠标

项目中有一个需求，在网页中，如果鼠标停止移动2秒钟，那么鼠标就将自动隐藏，当移动鼠标时，又显示出来，效果类似于演示TTP的效果，不要对电脑或者浏览器进行设置，直接用js做，纯html页面，不是flash里面的Mouse.hidden()和Mouse.show()。

求各位大神帮忙

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档 #demo1, #demo2 { width:500px; height:300px; border:1px solid #CCC; } #demo1 { background-color:#9FF; margin-bottom:10px; } #demo2 { background-color:#FFC; } function showCoords(e, obj) { var e = window.event || e; var arCoords = [e.clientX, e.clientY]; obj.getElementsByTagName('p')[1].getElementsByTagName('span')[1].innerHTML = 'X:' + arCoords[0] + ',Y:' + arCoords[1]; } window.onload = function() { document.getElementById('demo1').onmousemove = function(event) { showCoords(event, this); } document.getElementById('demo2').onmouseover = function(event) { showCoords(event, this); } }

mousemove测试

当前坐标：

mouseover测试

当前坐标：


通过这个 可以判断鼠标移动的情况。这样 你需要去监听 当前坐标的值 。
每几秒监听下值 是否变化，如果不变。
就用CSS样式
BODY{CURSOR: url('空白图片url')}

去把鼠标 换个图片。

具体思路是这样的 加个定时器这个定时器每2秒执行一下， 然后在mousemove事件中设置一个值，如果2秒内动了就设置为false，否则true
定时器里面判断这个值，如果值是ture通过dom给鼠标设置一个图标 ，这个图标是透明的
BODY{CURSOR: url('http://www.baidu.com/favicon.ico')} 类似这样
如果是false则把这个全局的值改为true

具体的代码自己实现吧..

可以参考
[url]http://tieba.baidu.com/p/2206142800#frs_nav[/url]
[url]http://zhidao.baidu.com/link?url=6pwSY6GVYoQCq0sKi4b_Aa_KwtOcBbuBQR7hXDJkh2VKFPMVT7owu7RI005S7ulvJxnQTWf4pnFKpuGj1G9v7q[/url]

[code="js"]$(function () {
var timer;
var hidding = false;
$(document).mousemove(function () {
if(hidding){
hidding = false;
return;
}
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('html').css({
cursor: ''
});
timer = setTimeout(function () {
hidding = true;
$('html').css({
cursor: 'none'
});
}, 2000)
});
});[/code]

我只回答关于iframe的部分。其他的请参考大家的。

解决办法是在最顶层的页面里加个div，它

  1. 透明。
  2. 100%铺满整个页面。
  3. z-index大于iframe。

参考的html如下

[code="html"]

.cover { position: absolute; z-index: 999; width: 100%; height: 100%; background-color: transparent; /*border: 1px solid blue;*/ }

[/code]

这样基本上就能捕捉到mousemove事件，即使鼠标在iframe上划过。

Chrome上没问题。
IE9+上没问题
Firefox上应该没问题。
IE6～8基本上不能用。