<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title>用jquery判断鼠标划入方向</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#box{
width: 100px;
height: 100px;
background: #dddddd;
margin: 100px;
}
#jqbox{
position: relative;
width: 100px;
height: 100px;
margin: 100px;
overflow: hidden;
}
#client , #hidden{
width:100%;
height:100%;
background: #dddddd;
position: absolute;
}
#client{
left:0;
top:0;
}
#hidden{
background: #6bc30d;
left:-100%;
top:-100%;
}
</style>
</head>
<body>
<div id="jqbox">
<div id="client"></div>
<div id="hidden"></div>
</div>
<div id="box"></div>
<script>
var wen_direction = (function () {
var jqDirection;
function Direction(id) {
this.id = document.getElementById(id) || id ;
}
Direction.prototype.init = function (enterObj, leaveObj) {
//鼠标滑入元素
var self = this;
this.id.addEventListener('mouseenter', function (e) {
var directionNumber = self.main(e); //返回数字 返回0:上方进入， 返回1:右方进入，返回2：下方进入，返回3：左方进入
var funArray = [enterObj.top, enterObj.right, enterObj.bottom, enterObj.left];
funArray[directionNumber](self.id);
},false);
this.id.addEventListener('mouseleave', function (e) {
var directionNumber = self.main(e); //返回数字 返回0:上方离开， 返回1:右方离开，返回2：下方离开，返回3：左方离开
var funArray = [leaveObj.top, leaveObj.right, leaveObj.bottom, leaveObj.left];
funArray[directionNumber](self.id);
},false);
};
/*主函数 返回数字来判断从哪个方向进入*/
Direction.prototype.main = function (e) {
var w = this.id.scrollWidth;
var h = this.id.scrollHeight;
var x = (e.offsetX - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.offsetY - (h / 2)) * (h > w ? (w / h) : 1);
var number = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
return number;
};
/*基于jquery的事件对象*/
Direction.prototype.jqRun=function(e) {
var directionNumber = this.jqMain(e);
var obj = {};
switch(directionNumber)
{
case 0://from top
obj.left = 0;
obj.top = "-100%";
break;
case 1://from right
obj.left = "100%";
obj.top = 0;
break;
case 2://from bottom
obj.left = 0;
obj.top = "100%";
break;
case 3://from left
obj.left = "-100%";
obj.top = 0;
break;
}
return obj;
};
Direction.prototype.jqMain = function (e) {
var w = this.id.width();
var h = this.id.height();
/*计算x和y得到一个角到elem的中心，得到相对于x和y值到div的中心*/
var x = (e.pageX - this.id.offset().left - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.id.offset().top - (h / 2)) * (h > w ? (w / h) : 1);
/** 鼠标从哪里来 / 角度 和 方向出去顺时针（得出的结果是TRBL 0 1 2 3
* 首先计算点的角度，
* 再加上180度摆脱负值
* 除于90得到的象限（象限，又称象限角，意思就是一个圆之四分之一等份）
* 加上3，做一个模（求模 求余数）4的象限转移到一个适当的顺时针 得出 TRBL 0 1 2 3（上/右/下/左）
**/
var number = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
return number;
};
return {
run: function (id, enterObj, leaveObj) {//这个接口用于原生js
var directionChild = new Direction(id);
directionChild.init(enterObj, leaveObj);
},
jqRun: function(id, e){//暴露的这个接口是基于jquery的
if(!jqDirection){
jqDirection = new Direction(id);
}
return jqDirection.jqRun(e);//返回一个样式对象{left：string，top：string}
}
}
})();
//测试用例
var enterObject = {
left: function(self) {
self.innerHTML = "从左边进入";
console.log("从左边进入");
},
right: function(self) {
self.innerHTML = "从右边进入";
console.log("从右边进入");
},
top: function(self) {
self.innerHTML = "从上边进入";
console.log("从上边进入");
},
bottom: function(self) {
self.innerHTML = "从下边进入";
console.log("从下边进入");
}
};
var leaveObject = {
left: function(self) {
self.innerHTML = "从左边离开";
console.log("从左边离开");
},
right: function(self) {
self.innerHTML = "从右边离开";
console.log("从右边离开");
},
top: function(self) {
self.innerHTML = "从上边离开";
console.log("从上边离开");
},
bottom: function(self) {
self.innerHTML = "从下边离开";
console.log("从下边离开");
}
};
wen_direction.run('box',enterObject, leaveObject);
var jqbox = $("#jqbox");
var hidden = jqbox.children("#hidden");
jqbox.hover(function(e) {
hidden.css(wen_direction.jqRun(jqbox,e)).stop(true,true).animate({left: '0', top: '0'},200);
},function(e) {
hidden.stop(true, true).animate(wen_direction.jqRun(jqbox,e), 200);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html ch">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" >
.ct{
height: 100px;
width: 100px;
border:1px red solid;
position: relative;
overflow: hidden;
position: absolute;
top:50%;
left: 50%;
}
.hot_info{
position: absolute;
background: #333;
background: rgba(0,179,138,.9);
filter: alpha(opacity=90);
width: 100%;
height: 100%;
transition: all 300ms ease
}
</style>
</head>
<body>
<div class="ct" οnmοuseοver="fun1(event);" οnmοuseοut="fun2(event);">
<div class="hot_info" style="display: block; left: -100%; top: 0px; transition: all 300ms ease; text-align: center; color: #fff">
<h5 title="凯泰铭">MTM</h5>
<em></em>
<p title="车险反欺诈领导者，立足互联网车险市场">
中国医疗管理品牌领导者
</p>
</div>
</div>
<script type="text/javascript">
//当然这样绑定事件函数是不对的
var div=document.getElementsByTagName("div")[0];
var div2=document.getElementsByClassName("hot_info")[0];
function fun1(event){
var x=event.pageX-div.offsetLeft;//(得到鼠标在框中的坐标)
var y=event.pageY-div.offsetTop;//(得到鼠标在框中的坐标)
var H=div.clientHeight;
var W=div.clientWidth;
var k=Math.floor(H/W);//为了防止不能整除
if((k*x)>=y && (H-k*x)>=y){//这是判断从上方进入,这边简化处理不对等于情况做特别处理
console.log("从上方进入");
div2.style.left="0px"
div2.style.top="0px"
}
if((k*x)<y && (H-k*x)<y){
console.log("从下方进入");
div2.style.left="0px"
div2.style.top="0px"
}
if((k*x)<y && (H-k*x)>y){
console.log("从左边进入");
div2.style.left="0px"
div2.style.top="0px"
//todo
}
if((k*x)>y && (H-k*x)<y){
console.log("从右边进入");
div2.style.left="0px"
div2.style.top="0px"
}
}
function fun2(event){
var x=event.pageX-div.offsetLeft;//(得到鼠标在框中的坐标)
var y=event.pageY-div.offsetTop;//(得到鼠标在框中的坐标)
var H=div.clientHeight;
var W=div.clientWidth;
var k=Math.floor(H/W);//为了防止不能整除
if((k*x)>=y && (H-k*x)>=y){//这是判断从上方进入,这边简化处理不对等于情况做特别处理
console.log("从上方离开");
//div2.style.top="-100px"
div2.style.left="0px"
div2.style.top="-100px"
}
if((k*x)<y && (H-k*x)<y){
console.log("从下方离开");
div2.style.left="0px"
div2.style.top="100px"
}
if((k*x)<y && (H-k*x)>y){
console.log("从左边离开");
div2.style.left="-100px"
div2.style.top="0px"
}
if((k*x)>y && (H-k*x)<y){
console.log("从右边离开");
div2.style.left="100px"
div2.style.top="0px"
}
}
</script>
</body>
</html>
![《Android动画高手成长记》跳跳球效果[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)