判断鼠标从哪个方向进入--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获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
随机推荐
- CodeForces 220(div 2)
悲剧的div2..... A 题意:在n * m的矩形平面直角坐标系中,从(x, y)可以到四个点(x - a, y - b),(x + a, y - b),(x - a, y + b),(x + a ...
- python 解析xml 文件: SAX方式
环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...
- Necklace of Beads
http://poj.org/problem?id=1286 // File Name: poj1286.cpp // Author: bo_jwolf // Created Time: 2013年1 ...
- Struts2.xml中result type属性说明
在struts2配置XML里,result中type属性有以下几种: 1.dispatcher:服务器跳转到前台,后面跟着可以是JSP.htm等等前台页面,默认是这种. 2.redirect:客户端跳 ...
- JQuery请求WebService返回数据的几种处理方式
打开自己的博客仔细浏览了一番,发现已经好久没有写博客了,由于最近一直比较忙碌懈怠了好多.默默反省三分钟.......言归正传,现在就对最近在学习webservice的过程中遇到的几种类型的问题中我的理 ...
- 三种root的修补方式
三种root的修补方式 system/core/adb/abd.c adbd漏洞,请看abd.c的第917行/* then switch user and group to "shell&q ...
- Java基础知识强化之集合框架笔记07:Collection集合的遍历之迭代器遍历
1. Collection的迭代器: Iterator iterator():迭代器,集合的专用遍历方式 2. 代码示例: package cn.itcast_03; import java.util ...
- java中-静态代码块、构造代码块、构造方法的联系
例如该题: 1 class Fu{ static { System.out.println("这是父类静态代码块"); } { System.out.println("这 ...
- poj 2679 Adventurous Driving(SPFA 负环)
/* - - 这题做了一天.....粗心害死人啊 题目描述恶心 数据更恶心... 先处理一下能走的边 能走的点(到这建边从终点跑一下.) 然后就是SPFA了 注意负环的判断 */ #include&l ...
- SQL 插入查询的最大ID 号 进行批量
INSERT INTO tbl_image_language ( code, docomo_cd, au_cd, softbank_cd ) SELECT DISTINCT((SELECT max(c ...