基于JQuery的获取鼠标进入和离开容器方向的实现

基于JQuery的获取鼠标进入和离开容器方向的实现

 做动画时,需要判断鼠标进入和退出容器的方向。网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例。注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>判断鼠标从哪个方向进入和离开容器</title>
 6         <script src="js/jquery-3.1.1.min.js"></script>
 7         <style>
 8             *{border: 0;margin: 0;padding: 0;}
 9             .item{width: 300px; height: 200px;border: 1px solid #999;margin: 50px;}
10         </style>
11     </head>
12     <body>
13         <div class="item">
14         </div>
15         <p id="info"></p>
16     </body>
17     <script>
18         /**
19          * 判断鼠标从哪个方向进入和离开容器
20          * @param {Object} tag JQuery对象,事件绑定的主体
21          * @param {Object} e   event对象
22          * @return {Number} direction 值为“0,1,2,3”分别对应着“上,右,下,左”
23          */
24         function moveDirection(tag,e){
25             var w = $(tag).width();
26             var h = $(tag).height();
27             var x = (e.pageX - tag.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
28             var y = (e.pageY - tag.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
29             var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
30             return direction;
31         }
32         //使用方法
33         $(".item").on("mouseenter mouseleave", function (e) {
34             var eType = e.type;
35             var direction = moveDirection(this,e);
36             var dirName = new Array("上","右","下","左");
37             if(eType == "mouseenter"){
38                 $("#info").text("鼠标从"+dirName[direction]+"方进入方框");
39             }else if(eType == "mouseleave"){
40                 $("#info").text("鼠标从"+dirName[direction]+"方离开方框");
41             }
42         });
43     </script>
44 </html>
时间: 12-29

基于JQuery的获取鼠标进入和离开容器方向的实现的相关文章

一款基于jQuery的支持鼠标拖拽滑动焦点图

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片. 在线预览   源码下载 实现的代码. html代码: <div class="main_visual"> <div class="flicking_con"> <a class="on" href=&quo

基于jquery的鼠标滚动放大缩小图片

一直以来都想写一个图片放大和缩小的小玩意,本来以为会很复杂,这几天自己思考了一下,原来是so easy啊.目前实现的放大缩小,主要时依据鼠标的滚轮触发事件来实现的,废话少说直接上源码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

基于jQuery 常用WEB控件收集

Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. jQuery-Horizontal Accordion AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form). AutoComplete-JQuery Facebook

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(docum

基于jQuery的TreeGrid组件详解

一.TreeGrid组件相关的类 1.TreeGrid(_config) _config:json格式的数据,组件所需要的数据都通过该参数提供. 2.TreeGridItem(_root, _rowId, _rowIndex, _rowData) _root:显示组件实例的目标容器对象. _rowId:选中行的id. _rowIndex:选中行的索引. _rowData:json格式的行数据. 二._config参数详解 id:组件实例的id. width:组件实例的宽度. renderTo:用

jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div> $("ele").click(function(){ alert('触发指定事件') }) $("#test").click(function(){ $("ele").click() //手动指定触发事件 });   方法二:$ele.click( h

如何获取鼠标位置

获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div> //进行操作 <script type="text/javascript"> var x,y,T,L; T=$("#m").offset().top;//div离开左端的距离 L=$("#m").offset().left;//

10款基于jQuery的图片滑块焦点图插件

1.Material UI – Material Design CSS 框架 Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才是焦点.Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React 组件.可以作为 NPM 安装包,使用 browserify 和 reactify 的依赖管理和 J