码迷,mamicode.com
首页 > 其他好文 > 详细

判断鼠标移入移出方向设置

时间:2015-06-06 22:00:31      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:

原理:以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π /4),[-π/4,π/4)划分为四个象限,鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下,右,上,左。如下图所示

技术分享

Js代码

var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);

计算x坐标值时,如果点原来的x坐标的绝对值大于圆的半径值,则按 h/w 这个比例进行缩小,使得到的点的位置在容器的边界位置所对应的象限区间里。 y 坐标的计算也是一样。

Js代码 

var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;  

((Math.atan2(y, x) * (180 / Math.PI)将点的坐标对应的弧度值换算成角度度数值,这里加上180在这个算法里必须的,因为atan2(y,x)返回值的范围是[-π,π],而不是我们习惯的[0,2π],负值会影响结果的正确性(比如右上和右下算出来的结果会不同),而且确实也使得得到的结果0,1,2,3的顺序符合了习惯(原作者可能没想这个,只是css里总是这个顺序,或许是我自己的习惯~)。
除以90,再取四舍五入值,是一个很精妙的用法,使得可以以45°为分界线。 

完整实例代码如下:

技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
    .c{
        height:200px;
        width:200px;
        background:red;
        top:200px;
        position:absolute;
        opacity:0.5; 
    }
</style>
</head>
<body>
<div id="wrap"  style="position:relative;  overflow:hidden; width:200px;height: 200px; top:200px; left:300px; border: 1px solid #99bbe8;">我是我我我哦
<div id=box class=c></div>
</div>
<script>

$("#wrap").bind("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 direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 
         //direction的值为“0,1,2,3”分别对应着“上,右,下,左”
             
             if( e.type == mouseenter &&  direction == 0 ){  
                //
              
                 $(#box).css({"top":-200px,left:0}).animate({top: 0, left: 0}, 300)    
             }else if( e.type == mouseleave &&  direction == 2 ){
                 $(#box).animate({top: "200px", left:" 0"}, 300)
             }else if( e.type == mouseenter &&  direction == 1 ){
                 //
                 $(#box).css({"top":0,left:200px}).animate({top: 0, left: 0}, 300)
             }else if( e.type == mouseleave &&  direction == 3 ){
                 $(#box).animate({top: "0", left:"-200px"}, 300)
             }else if( e.type == mouseenter &&  direction == 2 ){
                 //
                 $(#box).css({"top":200px,left:0}).animate({top: 0, left: 0}, 300)
             }else if( e.type == mouseleave &&  direction == 0 ){
                 $(#box).animate({top: "-200px", left:" 0"}, 300)
             }else if( e.type == mouseenter &&  direction == 3 ){
                 //
                 $(#box).css({"top":0,left:-200px}).animate({top: 0, left: 0}, 300)
             }else if( e.type == mouseleave &&  direction == 1 ){
                 $(#box).animate({top: "0", left:"200px"}, 300)
             }
         });
</script>
</body>
</html>
完整设置元素移入移出代码

 

判断鼠标移入移出方向设置

标签:

原文地址:http://www.cnblogs.com/web-alibaba/p/4557318.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!