js判断鼠标是否停止移动
本程序实现当鼠标在一个特定的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判断鼠标是否停止移动的更多相关文章
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- JS判断鼠标移入元素的方向
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- js 判断滚动条是否停止滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js判断鼠标向上滚动并浮动导航
<div id="Jnav"> <ul class="nav"> <li><a href="#"& ...
- js判断鼠标进入以及离开容器的方向
(注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题 如图当鼠标右箭头位置上下移动的时候 下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...
- js判断鼠标位置是否在某个div中
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...
随机推荐
- Ubuntu杂记——Ubuntu下以USB方式连接Android手机调试
在Ubuntu下进行Android开发,发现自己的手机就算打开USB连接.USB调试还是连不上,一直都是显示??????.百度了很多,发现都是要改“ /etc/udev/rules.d/50-andr ...
- objective-c 语法快速过（1）
有一定 c++或者 java 基础,过一遍 oc 语法即可,都是相通的,个人认为难点是 oc 的内存管理,虽然有了 ARC,但是也需要学习下,因为有旧软件的维护. 建立在C语言的基础上,增加了一层小范 ...
- 重温Servlet学习笔记--Cookie对象
首先要了解cookie必须得先了解http协议,,Cookie是http协议指定的,先由服务器保存cookie到浏览器,在下次浏览器请求服务器时把上次请求得到的cookie归还给服务器,cookie以 ...
- ASP.NET或者 js方式实现文件夹多图片浏览的方式
1.JS方式,限制大,而且图片名称如果不规则的话会获取不全. <html> <head> <style> img { max-width:1300px; } < ...
- Windows Server 2008 下解析二级域名的方法
昨天去了客户那里部署网站,用的是客户那边的windows server 2008. 本文主要以总结问题点的形式来说. 问题1:本机的数据库是SQL SERVER 2008R2,客户那边的数据库是SQL ...
- css常用的特效代码
一.网页变灰的代码:a) 网页变灰色<head>加到这里</head><style type="text/css">html {FILTER: ...
- 【集合框架】JDK1.8源码分析之LinkedList（七）
一.前言 在分析了ArrayList了之后,紧接着必须要分析它的同胞兄弟:LinkedList,LinkedList与ArrayList在底层的实现上有所不同,其实,只要我们有数据结构的基础,在分析源 ...
- ORM小结
最近看园子里 @李林峰的园子 关于ORM的介绍,真的很好.自己看了也有一点点小心的,记录一下. ORM即为一种数据模型和数据库中关系映射的一种方式. 学过“三层架构”,知道怎么把表 示层(UI)--& ...
- JDBC连接SQL Server代码模板
* JDBC连接SQL Server数据库 代码模板* Connection: 连接数据库并担任传送数据的任务:* Statement : 执行SQL语句:* Re ...
- 定制自己的mybatis生成
MyBatis Generator原生提供的生成方式targetRuntime有几种,但都不符合项目需求或想自定义自己的方法. 网上的文章也很多: 如:http://generator.sturgeo ...