判断鼠标从哪个方向进入--jQuery
转载自:http://sentsin.com/web/112.html
$("#wrap").bind("mouseenter mouseleave",function(e) {
var w = $(this).width();
var h = $(this).height();
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上,右,下,左”
var eventType = e.type;
var dirName = new Array('上方','右侧','下方','左侧');
if(e.type == 'mouseenter'){
$("#result").html(dirName[direction]+'进入');
}else{
$('#result').html(dirName[direction]+'离开');
}
});
很实用的一段代码
判断鼠标从哪个方向进入--jQuery的更多相关文章
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- js判断鼠标滑轮滚动方向并根据滚动的方向触发不同的事件
<script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDel ...
- JS判断鼠标从哪个方向进入DIV容器
写的不够高大上 , 不要介意哦... Js: //进去 $(".flash").bind("mouseenter",function(e){ /** the w ...
- jQuery插件,判断鼠标的移入移出方向
今天用jQuery封装了一个简单的插件,判断鼠标的移入移出方向,以后的项目中可能还会遇到这样一个简单的效果,就记录下来吧! 先看结构和样式: <!DOCTYPE html> <htm ...
- js中判断鼠标滚轮方向的方法
前 言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...
- JS实现穿墙效果(判断鼠标划入划出的方向)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 关于js判断鼠标移入元素的方向--解释
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
- 关于js判断鼠标移入元素的方向——上下左右
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
随机推荐
- 《A First Course in Probability》-chaper5-连续型随机变量-正态分布
古典统计学问题一开始起源于赌博,让我们看这样一道有关赌博的问题. Q:A.B两人进行n局赌博,A胜的概率是p,现在设置随机变量X表示A赢的局数,当X>np,A给赌场X-np元,否则B给赌场np- ...
- curl 模拟ajax 请求
主要是在header请求里加一个 X-Requested-With: XMLHttpRequest curl -v -H "X-Requested-With: XMLHttpRequest ...
- 分享一个linux和linux的文件传输【scp无密码传输】
很多时候,本地测试服务器想把文件传到线上服务器的时候,很多人都是通过登陆线上服务器ssh 传输,这样挺危险的,很多弊端....所以我找了下方法,发现scp挺好用的! 模拟环境: 192.168.147 ...
- Java EE 7 / JAX-RS 2.0: Simple REST API Authentication & Authorization with Custom HTTP Header--reference
REST has made a lot of conveniences when it comes to implementing web services with the already avai ...
- Swift: 基本操作符
这里只讲一下Swift中比较特殊的操作符,在其他语言中也存在操作符就不再讲了 Nil-Coalescing Operator: ?? The nil-coalescing operator (a ?? ...
- Android群英传》读书笔记 (1) 第一章 Android体系与系统架构 + 第二章 Android开发工具新接触
第一章 Android体系与系统架构 1.Dalvik 和 ARTDalvik好比是一辆可折叠的自行车,平时是折叠的,只有骑的时候,才需要组装起来用.ART好比是一辆组装好了的自行车,装好就可以骑了. ...
- 关于Daydream VR的最直白的介绍
虚拟现实(Virtual Reality),简称虚拟技术,也称虚拟环境,是利用电脑模拟产生一个三度空间的虚拟世界,提供用户关于视觉等感官的模拟,让用户如同身历其境一般,电脑可以立即进行复杂的运算,将精 ...
- The requested URL ***** was not found on this serve
Wamp的Alias具体是干什么用的,后面要研究一下!!!! 我是之前创建了一个站点用Alias,后来把站点文件移到了www下后,除了首页都访问不了了.显示“The requested URL *** ...
- 【转】HttpServlet详解
[转]HttpServlet详解 Servlet的框架是由两个Java包组成:javax.servlet和javax.servlet.http. 在javax.servlet包中定义了所有的Servl ...
- SQL 里面的COALESCE函数
在SQL里面除了is null 还有这样一个还用的方法 COALESCE(值[, ...]) select COALESCE(NULL,NULL,'AAAA') -> 'AAAA' 意思是前面的 ...