所有的

Math.atan2()函数应用:瀑布流中的滑动效果,通过鼠标判断滑动方向
1587
2014-1-9

前些时间加了个瀑布流中的滑动效果,


您可以狠狠的猛戳本站的share模块:超级福利


然后滑动小鼠标以不同方向进入萌妹子的美图...


代码

1.判断鼠标从哪个方向进入元素,最开始的时候我的代码是这样的:(上下左右各加四个透明层做事件捕捉对象)

$('#list > div .block_i').afterbind('mouseenter', function (e) {
    if (!$(this).children('.block_op').is(":animated")) {
        var m = getMousePos(e);
        var i = $(this).parent();
        var w = columns[requestcolumns];
        var lt = $(this).offset();
        var lb = i.find('.url').offset();
        var h = lb.top - lt.top;
        var temp = 50;
        if (m.x < lt.left + temp && m.y > lt.top + temp && m.y < lt.top + h - temp) {
            $(this).children('.block_op').stop().show().op(1).t(0).l(-w).a({ left: 0 }, 200);
        } else if (m.x > lt.left + w - 20 && m.y > lt.top + temp && m.y < lt.top + h - temp) {
            $(this).children('.block_op').stop().show().op(1).op(1).t(0).l(w).a({ left: 0 }, 200);
        } else if (m.y < lt.top + temp) {
            $(this).children('.block_op').stop().show().op(1).l(0).t(-h).a({ top: 0 }, 200);
        } else if (m.y > lt.top + h - temp) {
            $(this).children('.block_op').stop().show().op(1).l(0).t(h).a({ top: 0 }, 200);
        }
    }
});


2.然后有一天google了一下突然找到一个老外的代码:好长的地址 ^_^

总结了一下,以下为jq下的实现方式:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>判断鼠标进入方向</title>
</head>
<body>
<style>
html,body{margin:0;padding:0;}
#wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;}
</style>
<div id="wrap">
     方向反馈
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<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;
    var eventType = e.type;
    var dirName = new Array('上方','右侧','下方','左侧');
    if(e.type == 'mouseenter'){
        $(this).html(dirName[direction]+'进入');
    }else{
        $(this).html(dirName[direction]+'离开');
    }
});
</script>
</body>
</html>


   再上一个js原生实现方法,同样是使用Math.atan2函数:


var wrap = document.getElementById('wrap');
var hoverDir = function(e){
    var w=wrap.offsetWidth;
    var h=wrap.offsetHeight;
    var x=(e.clientX - wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
    var y=(e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
    var eventType = e.type;
    var dirName = new Array('上方','右侧','下方','左侧');
    if(e.type == 'mouseover' || e.type == 'mouseenter'){
        wrap.innerHTML=dirName[direction]+'进入';
    }else{
        wrap.innerHTML=dirName[direction]+'离开';
    }
}
if(window.addEventListener){
    wrap.addEventListener('mouseover',hoverDir,false);
    wrap.addEventListener('mouseout',hoverDir,false);
}else if(window.attachEvent){
    wrap.attachEvent('onmouseenter',hoverDir);
    wrap.attachEvent('onmouseleave',hoverDir);
}



这里用到了Math.atan2函数,

完美拯救了我所谓的"加四个透明层"的屌丝代码.

语法

Math.atan2(y,x); //返回由x轴到点(x,y)的角度(以弧度为单位)

参数:

y -- 为number类型的数字(描述笛卡尔y坐标)

x -- 为number类型的数字(描述笛卡尔x坐标)

示例

document.write(Math.atan2(5,0));

document.write(Math.atan2(0,5));

输出

1.57079632679489660







全部评论
(1)
评论速度
mores++

还可以输入 2000 个字符
添加表情