2 ai137853 ai137853 于 2014.10.08 18:02 提问

这个效果的原理 求解 主要是那个加粗的代码怎么解释

<!DOCTYPE html>



标题 $(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; var eventType = e.type; console.log(x+'=============='+(e.pageX - this.offsetLeft - (w / 2))); var aPos=[{left:0,top:-h},{left:w,top:0},{left:0,top:h},{left:-w,top:0},{left:0,top:0}]; if(eventType == 'mouseenter'){ $("#box2").css(aPos[dirNum]).stop(true,true).animate(aPos[4],200); } if(eventType == 'mouseleave'){ $("#box2").stop(true,true).animate(aPos[dirNum],200); } }); }); #box{width: 300px;height: 200px;border:1px solid #999;margin: 200px auto;position:relative;zoom:1;overflow: hidden;} #box1{height: 200px;width:300px;background-color: orange;text-align: center;line-height: 200px;} #box2{position: absolute;width:300px;height: 200px;background-color: red;text-align: center;line-height: 200px;}


#box1
#box2


Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
HDFS ZKFC自动切换原理分析
前言Hadoop社区在HDFS-1623(High Availability Framework for HDFS NN)以及相关JIRA中对NameNode增加了高可用性的支持。但是它的实现需要依赖管理员手动切换NameNode,以此来触发NameNode的切换。这种操作方式有时会带来一些问题,比如说一个NameNode因为非主观原因导致异常,挂了,这个时候怎么办,这个时候我们可能更需要自动切换的
斐波那契数列的三种解决方案
斐波那契数列的求和是一个经常会见到的题,好久不看都忘了,今天来总结一下。求前n个斐波那契数列的和 三种解决方案: 1.使用三个变量,在循环到n之前,使用三个元素交换值。public class fb1 { // 定义三个变量方法 public static void main(String[] args) { int a = 1, b = 1, c =
FileInputStream()跟OpenFileInput()
FileInputStream()为FileInputStream类的构造方法,而OpenFileInput()为Context类的方法,两个方法都可以返回一个FileInputStream对象
Java Web方向的具体学习规划
转载地址:http://blog.csdn.net/jinxfei/article/details/4731509   Java 方向的读者预期   1、  有 Java 语言基础( Java SE ),想进一步了解 Java EE 和 WEB 前台页面开发。 2、  有 WEB 页面开发经验 / 经历,但感觉知识不够系统,希望加强学习。     Java 方向的主要内容
探索性测试,笔记一
探索性测试,笔记一 http://www.cnblogs.com/xwj-pandababy/articles/2149676.html 一些有意义的条目:    1、考虑自动化是否能发现有价值的缺陷,是否经得起时间的考验,是否值得付出维护费用   2、决定需要测试什么和何时测试     *对于每一个被发现的缺陷,明确的讨论它应该在什么时候被发现   3、决定如何测试    
一个APP从启动到主页面经历的过程
本文主要介绍app从启动到主页面显示经历了哪些流程以及实现原理 转自:https://www.jianshu.com/p/a72c5ccbd150 一、流程概述 启动流程: ①点击桌面App图标,Launcher进程采用Binder IPC向system_server进程发起startActivity请求; ②system_server进程接收到请求后,向zygote进程发送创建进
OTSU自适应阈值化
OTSU算法可以自适应的实现阈值的二值化,这个主要是该算法的原理及实现的代码
利用display属性写的遮罩层
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  http://www.w3.org/1999/xhtml" >     DIV CSS遮罩层             function showdiv() {                        document.getElementById("bg")
ImageView的属性及使用相关
imageview的重要属性,宽度适配屏幕高度等比拉伸、无压缩代码。加载图片的方法。
利用css的clear属性实现文字环绕图片效果
QQ:285679784   欢迎加入技术交流QQ群80669150 (附加信息:珠海 -"Lzw )一起学习 ! 转自 免费模板网http://www.wangjie.org/ 演示效果截图 HTML代码 <div style="float:left;height:250px;width:250px; clear:left;ba