基于JQuery的获取鼠标进入和离开容器方向的实现
做动画时，需要判断鼠标进入和退出容器的方向。网上找到的基于JQuery的实现方法，用函数封装了一下，写了一个示例。注意绑定鼠标事件用的是on()，所以JQuery版本需高于1.7。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>判断鼠标从哪个方向进入和离开容器</title>
<script src="js/jquery-3.1.1.min.js"></script>
<style>
*{border: 0;margin: 0;padding: 0;}
.item{width: 300px; height: 200px;border: 1px solid #999;margin: 50px;}
</style>
</head>
<body>
<div class="item">
</div>
<p id="info"></p>
</body>
<script>
/**
* 判断鼠标从哪个方向进入和离开容器
* @param {Object} tag JQuery对象，事件绑定的主体
* @param {Object} e event对象
* @return {Number} direction 值为“0,1,2,3”分别对应着“上，右，下，左”
*/
function moveDirection(tag,e){
var w = $(tag).width();
var h = $(tag).height();
var x = (e.pageX - tag.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - tag.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
return direction;
}
//使用方法
$(".item").on("mouseenter mouseleave", function (e) {
var eType = e.type;
var direction = moveDirection(this,e);
var dirName = new Array("上","右","下","左");
if(eType == "mouseenter"){
$("#info").text("鼠标从"+dirName[direction]+"方进入方框");
}else if(eType == "mouseleave"){
$("#info").text("鼠标从"+dirName[direction]+"方离开方框");
}
});
</script>
</html>
基于JQuery的获取鼠标进入和离开容器方向的实现的更多相关文章
- 一款基于jquery实现的鼠标单击出现水波特效
今天要为大家绍一款由jquery实现的鼠标单击出现水波特效.用鼠标猛点击页面,你可以看到页面不断出面水波纹效果.然后水波纹渐渐消失.效果非常不错.我们一起看下效果图: 在线预览 源码下载 实现的代 ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- 基于jquery的-获取短信验证码-倒计时
在制作短信验证的时候,需要做一个获取短信按钮,点击后显示倒计时, html代码如下: <input class="gain" type="button" ...
- js判断鼠标进入以及离开容器的方向
(注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题 如图当鼠标右箭头位置上下移动的时候 下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
- 基于jQuery的鼠标悬停时放大图片的效果制作
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
- 基于jQuery鼠标滚轮滑动到页面节点部分
基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
随机推荐
- Zephyr OS 简介
最新发布的开源 Zephyr Project™(Zephyr 项目)是一款小型且可伸缩的实时操作系统,尤其适用于资源受限的系统,可支持多种架构:该系统高度开源,对于开发人员社区完全开放,开发人员可根据 ...
- HTML (超文本标记语言）
<html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body> ...
- Retrofit2.0起步篇
retrofit 英文名字是改装的意思,也就是说他是对网络请求的一种改装,他不负责进行网络请求,他是对请求方式的一种封装.真正进行网络请求的是okhttp. 以下所有内容在Android Studio ...
- 简单例子了解View的事件分发
什么是事件分发 我们在写自定义ViewGroup或者自定义View的时候经常要处理用户的点击事件,如果我们的View在最底层,他在很多ViewGroup里面,我们如何让我们的点击事件准确传递到View ...
- Windows 10 安装SVN 不显示状态图标--解决方法
升级win10以后,什么都正常,就是svn版本库图标不见了,图标的显示有助于我们定位代码的修改及提交情况,该怎么办呢? 下面分享详细的解决办法亲测有用: 其实也比较简单, 在注册表中找到此项: HKE ...
- ASP.NET MVC系列：Model
1. Model任务 Model负责通过数据库.AD(Active Directory).Web Service及其他方式获取数据,以及将用户输入的数据保存到数据库.AD.Web Service等中. ...
- Livecoding.tv2.5发布，增加“用户搜索引擎”功能，方便用户找到匹配的程序员
近日,在Livecoding.tv最新发布的博客中,介绍了该平台2.5版的一系列新功能,其中的User Discovery Engine(用户搜索引擎)受到大家的欢迎.使用该引擎,可以很方便地查找在L ...
- 存储程序(2)——MYSQL
1.触发器 触发器是与特定数据表相关联的存储过程,当相应的数据表被INSERT.DELETE或UPDATE语句修改时,触发器将自动执行.触发器可以被设置成在这几种语句处理每个数据行之前或之后触发.触发 ...
- OpenCASCADE Job - Shoe Doctor
鞋博士 鞋博士经过8年沉淀,在鞋类工业4.0全流程平台上积累了相当的技术实力,获投资商亲睐. 新的一年,在投资商协助下,将踏上新的征途,因此诚邀您加盟顶层技术合伙人. 如果您具备以下实力,我们期待您的 ...
- 无限循环轮播图之运动框架（原生JS）
封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...