本程序实现当鼠标在一个特定的div内悬停n秒时，判断出已经停止移动。

思路：

1.定义全局变量鼠标移动状态imouse，定时器timer。当鼠标在div内移动时，imouse值为1，相反静止时值为0；timer可以实现每过n秒就判断鼠标状态，然后把imouse重置为0；

2.div监听onmouseover。当鼠标进入区域时，就设置定时器；

3.div监听onmousemove。当鼠标移动时，设置imouse值为1；

4.div监听onmouseout。当鼠标离开时，清除定时器timer

<html>
    <head>
        <meta http-equiv="charset" content="utf-8" />
        <script type="text/javascript">
            var tip;
            var imouse = 0;
            var timer;

            function startup() {
                tip = document.getElementById("tip");
            }
            function mouseIn() {
                timer = window.setInterval(foo, 1000);
            }
            function mouseOut() {
                window.clearInterval(timer);
            }
            function mouseMove() {
                imouse = 1;
                tip.innerHTML = "move";
            }
            var foo = function() {
                if (imouse == 0) {
                    tip.innerHTML = "still";
                }
                imouse = 0;
            }
        </script>
    </head>
    <body onload="startup()">
        <div id="imgArea" onmousemove="mouseMove()" onmouseover="mouseIn()" onmouseout="mouseOut()">
            <!-- 这里随便放一些东西 -->
        </div>
        <div id="tip"></div>
    </body>
</html>

js判断鼠标是否停止移动的更多相关文章

  1. JS 判断鼠标滚轮的上下滚动

    JS 判断鼠标滚轮的上下滚动   <script type="text/javascript"> var scrollFunc = function (e) { e = ...

  2. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  3. JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  4. JS判断鼠标从什么方向进入一个容器

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...

  5. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  6. js 判断滚动条是否停止滚动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. js判断鼠标向上滚动并浮动导航

    <div id="Jnav"> <ul class="nav"> <li><a href="#"& ...

  8. js判断鼠标进入以及离开容器的方向

      (注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题      如图当鼠标右箭头位置上下移动的时候  下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...

  9. js判断鼠标位置是否在某个div中

    div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...

随机推荐

  1. 教你如何塑造JavaScript牛逼形象

    如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...

  2. Deffered.js的实现原理

    在艾伦的推荐下,看了一个日本人写的延时加载库,非常轻量,写的很棒.作为我的源码学习的第一编. 在认真看了两天之后,才看懂它的实现原理,我下面把通自己的理解,进行了精简.只程现原理,方便日后的回顾.&l ...

  3. [ROS] Studying Guidance

    Reference: https://www.zhihu.com/question/35788789 安装指南:http://wiki.ros.org/indigo/Installation/Ubun ...

  4. Robot Framework自动化测试 ---视频与教程免费分享

    当我第一次使用Robot Framework时,我是拒绝的.我跟老大说,我拒绝其实对于习惯了代码的自由,所以讨厌这种“填表格”式的脚本.老大说,Robot Framework使用简单,类库丰富,还可以 ...

  5. CompoundButton.OnCheckedChangeListener与RadioGroup.OnCheckedChangeListener冲突

    当RadioGroup与CompoundButton同时存在且都要监听事件时CompoundButton.OnCheckedChangeListener与RadioGroup.OnCheckedCha ...

  6. HTML5 canvas画布写炫彩动态的倒计时效果

    html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...

  7. Struts2 源码分析——Result类实例

    本章简言 上一章笔者讲到关于DefaultActionInvocation类执行action的相关知识.我们清楚的知道在执行action类实例之后会相关处理返回的结果.而这章笔者将对处理结果相关的内容 ...

  8. 迷惑很久，仅以个人想法谈谈MVC架构，希望大家多给点意见

    博主是非科班出身,所以和大部分新手有着一样的困惑,究竟什么才能算是MVC框架,总是在谈Model,View,Controller分离,可是究竟什么才能算是分离,而他们又是负责什么样的分工呢. 大二的时 ...

  9. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  10. java servlet 几种页面跳转的方法及传值

    java servlet 几种页面跳转的方法及传值   java web 页面之间传值有一下这几种方式1.form 表单传递参数2.url地址栏传递参数3.session4.cookie5.appli ...