本程序实现当鼠标在一个特定的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. IOS-Foundation框架结构

    这些东西,等用的时候查资料就行,用的多了,自然就记住了,大概过一下 发现一个不错的 ios 学习博客:http://www.cnblogs.com/kenshincui,非常好,推荐看看.FOunda ...

  2. (十八)WebGIS中清空功能和地图定位功能的设计以及实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...

  3. PHP中的魔术方法（2）

    1.__get.__set这两个方法是为在类和他们的父类中没有声明的属性而设计的__get( $property ) 当调用一个未定义的属性时访问此方法__set( $property, $value ...

  4. mongodb安装配置

    下载安装 官网下载地址:https://www.mongodb.com/download-center 执行msi文件. 环境配置 可以参照我的步骤来进行配置,目录根据个人需要设置. 解压安装包到D: ...

  5. nodejs学习笔记四——express-session

    博友沉沉-_-的这篇express 框架之session分析的已经非常详细了,本人这里就不描述了. 总结其中的几个关键点. 1.http协议规定http链接是无状态的链接,cookie和session ...

  6. 20个非常棒的jQuery倒计时脚本

    使用jQuery倒计时插件可能是最简单最好的方式添加动态和交互式倒数计时器到您的网站上.我相信你已经注意到了,例如倒计时功能运行网站,显示倒计时,直到一个大事件.当网站正在维护,告诉用户什么时候回来, ...

  7. [转载]C/C++框架和库

    C/C++框架和库 装载自:http://blog.csdn.net/xiaoxiaoyeyaya/article/details/42541419 值得学习的C语言开源项目 Webbench Web ...

  8. Xamarin.Android之Spinner的简单探讨

    一.前言 今天用了一下Spinner这个控件,主要是结合官网的例子来用的,不过官网的是把数据写在Strings.xml中的, 某种程度上,不是很符合我们需要的,比较多的应该都是从数据库读出来,绑定上去 ...

  9. 怎样制作web版的folder treeview

    文件夹treeview的效果 这样的treeview在实际项目中使用的场景较多. 既然用的多,那就DIY一遍,虽没有面面俱到,但也要将其基本实现完成一遍. 1.先准备图标素材  file.gif,文件 ...

  10. Xamarin.ios引用第三方SDK

    引言 诚然,Xamarin是个优秀的跨平台解决方案,但毕竟还是不能将Native中所有的方法都直接实现.诸如各种第三方库,也都只有java/oc原生版本的SDK,无法直接拿过来直接使用.但,不能直接拿 ...