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中的内容就不能操作了.解决的办 ...
随机推荐
- 解读SDN的东西、南北向接口
北向接口(Northbound Interface)是为厂家或运营商进行接入和管理网络的接口,即向上提供的接口. 南向接口(Southbound Interface)是提供对其他厂家网元的管理功能,支 ...
- Fragment基础----生命周期
Fragment生命周期和Activity对比 注意:在一个app的运行期间,前台的activity有时可能会被其他的视图组件打断,然后进入pause状态. 比如打开一个半透膜的activity (比 ...
- block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- SqlServer切换MySql总结
最近项目任务不多就琢磨着把SqlServer换成MySql(数据访问使用的ado.net),初步想了下方案有2种: 方案一:继续使用ado.net,重写所有的sql语句 优势:数据访问效率高,改写Sq ...
- webapi filter过滤器中获得请求的方法详情(方法名,Attributes)
public class GlobalActionFilter : ActionFilterAttribute { private string _requestId; public override ...
- 关于在云服务器上部署tomcat笔记
tomcat无法启动的原因有:1.由于在tomcat里JVM没有配好,他默认的是批向c:\program file\Java下的那一个,如果你确认 这没有删掉,JVM指向你自己安装的jdk\jre试试 ...
- IOS应用内存释放机制
这是由iOS系统管理决定的,但APP退出在后台后,只有10秒的持续运行时间,然后暂停.但该APP还在内存中,当出现内存警告,也就是别的APP要运行,而此时内存又不足的情况下,系统会回收停在后台APP所 ...
- JavaWeb之CSS详解
CSS的简介 1.CSS概述及作用 CSS:Cascading Style Sheets)是层叠样式表用来定义网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强 ...
- (原)3.4 Zookeeper应用 - 分布式锁
本文为原创文章,转载请注明出处,谢谢 分布式锁 1.原理 建立表示锁的父节点(图中locker节点) 每个争抢锁的服务器在locker节点下创建有序的临时节点 判断自己是否抢到锁:获取locker下所 ...
- Linq的分页与组合查询的配合使用
1.首先使用Linq连接数据库,并扩展属性 public partial class User { public string SexStr { get { string end = "&l ...