实现鼠标进入进出div时位置的监听效果
来源:互联网 发布:ubuntu安装vc 编辑:程序博客网 时间:2024/04/27 02:21
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>判断鼠标进入容易的方向,js判断划入方向</title><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script>$(function() {$("#box").on("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 dirNum=Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4;/*dirNum:0,1,2,3 ---> t r b l以上代码是网友分享以下代码是模仿拉勾网首页的一个小效果做的*/var eventType = e.type;var aPos=[{left:0,top:-200},{left:200,top:0},{left:0,top:200},{left:-200,top:0}];if(eventType == 'mouseenter'){$("#box2").css(aPos[dirNum]).stop(true,true).animate({left:0,top:0},200);}else{$("#box2").stop(true,true).animate(aPos[dirNum],200);}});});</script><style>#box{width: 200px;height: 200px;border:1px solid #999;margin: 200px auto;position:relative;zoom:1;overflow: hidden;}#box1{height: 200px;background-color: orange;text-align: center;line-height: 200px;}#box2{position: absolute;left: -200px;top: -200px;width: 200px;height: 200px;background-color: red;text-align: center;line-height: 200px;}</style></head><body><div id="box"><div id="box1">#box1</div><div id="box2">#box2</div></div></body></html>
//////////
/////////
实现原理
编者按:还记得亚马逊左侧分类导航的光速hover事件吗?它被一些闲的蛋疼的前端从业者无数次拿来津津乐道。刚好逛博客园的时候,又看到这样一篇文章,反正博客每天都需要更新,所以特此转来充个数,以下代码演示涉及到jQuery,建议前端大牛绕路。
就这么几行代码,将我印象里会有一长串的if else或者switch来完成的事完美的解决掉。在感到神奇之后,更多的是不解,因为看不懂。在网上搜索一番,也没有找到有谁来分析这个算法。于是自己研究了一下,现在写下来,作为自己的一份学习笔记,也希望能够和大家分享。
有不对的地方,或者有更好的理解,请告诉我,谢谢!
原理:以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限,鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下,右,上,左。如下图所示
计算x坐标值时,如果点原来的x坐标的绝对值大于圆的半径值,则按 h/w 这个比例进行缩小,使得到的点的位置在容器的边界位置所对应的象限区间里。 y 坐标的计算也是一样。
0 0
- 实现鼠标进入进出div时位置的监听效果
- Activity 进入和进出的动画效果
- 鼠标进出效果
- jquery实现div遮罩效果,并获取鼠标位置。
- 获取鼠标在div中的相对位置的实现代码
- DIV+CSS实现区域鼠标事件的动态效果
- javascript获取鼠标进入div的方向
- Jquery确定鼠标进入div的方向
- 判断鼠标进入div容器的方向
- Jquery实现如何实现DIV由下向上展开的效果,鼠标浮动时div由下向上缓慢展开。
- js 实现 鼠标拖动DIV 效果
- jQuery实现鼠标拖拽div效果
- 【jQuery】鼠标进入\离开操作实现div显示\隐藏
- 网页效果获取鼠标点击的位置
- jquery 在指定位置弹出div框并实现DIV由下向上展开的效果
- css,js实现在鼠标移动到一个位置在这个位置下面显示一个已经存在的div,这个div的位置随意
- 通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果
- Dialog的进出动画实现
- 【Mysql】利用内连接与嵌套查询实现多表查询,主键、外键的基本概念
- 回溯法
- 触摸转动布局 类似酷狗音乐的那种
- Protocol Buffer Nano介绍
- Function 语意学
- 实现鼠标进入进出div时位置的监听效果
- android移动端之开篇
- CST,CET,UTC,GMT,DST,Unix时间戳几种常见时间概述与关系
- CCS+C6678LE开发记录12:UIA组件的安装
- lruCache使用用于图片缓存
- 单点登录SSO的实现原理
- 通过FTP方式上传文件夹(整个目录)
- java 和具体的数据库结合Date类型转换
- android自动发送邮件的实现