absweikai
2013-08-22 16:29
浏览 887
已采纳

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

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

求各位大神帮忙

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • dashabenmao 2013-08-22 16:52
    已采纳

    <!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')}

    去把鼠标 换个图片。

    已采纳该答案
    打赏 评论
  • iteye_13447 2013-08-22 16:43

    具体思路是这样的 加个定时器这个定时器每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]

    打赏 评论
  • suziwen 2013-08-22 17:21

    [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]

    打赏 评论
  • clxy大叔 2013-08-22 22:23

    我只回答关于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基本上不能用。

    打赏 评论

相关推荐 更多相似问题