<!DOCTYPE html> <html lang="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 lang="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>