判断鼠标进入元素的位置（上下左右）

Html

Css

 * {
	margin:0;
	padding:0;
}
body {
	height:1500px;
}
.box {
	margin:20px 20px;
}
.out {
	width:200px;
	height:200px;
	border:1px solid saddlebrown;
	float:left;
	overflow:hidden;
}
.in {
	width:200px;
	height:200px;
	background:palevioletred;
	transform-origin:0 0;
	transform:rotate(90deg);
}

$('.out').mouseleave(function(e) {
    clearInterval(timer);
    var x = e.pageX - ($(this).offset().left + (parseFloat($(this).css('width'), 10) / 2));
    var y = $(this).offset().top + (parseFloat($(this).css('height'), 10) / 2) - e.pageY;
    var now = Math.atan2(y, x);
    var timer;
    if (now >= leftBottom && now < rightBottom) {
        //console.log('从下出去')
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left bottom',
            'transform': 'rotate(0deg)',
        })
        i = 0;
        var that = this
        var timer = setInterval(function() {
            i += 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 90) {
                clearInterval(timer);
            }
        }, 1)
    } else if (now >= 0 && now < rightTop || now >= rightBottom && now < 0) {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'right bottom',
            'transform': 'rotate(0deg)',
        })
        i = 0;
        var that = this
        var timer = setInterval(function() {
            i += 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 90) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从右出去')
    } else if (now >= rightTop && now < leftTop) {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left top',
            'transform': 'rotate(0deg)',
        })
        i = 0;
        var that = this
        var timer = setInterval(function() {
            i -= 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == -90) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从上出去')
    } else {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left bottom',
            'transform': 'rotate(0deg)',
        })
        i = 0;
        var that = this
        var timer = setInterval(function() {
            i -= 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == -90) {
                clearInterval(timer);
            }
        }, 1)
    }
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

判断鼠标进入元素的位置（上下左右）

代码描述：原生js 鼠标悬停方向感知

利用Math.atan2()函数获得方块四个顶点弧度，再将鼠标进入的位置弧度与之比较，即可得知鼠标是从哪个方位进入元素的

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

桃李成蹊

相关代码

判断鼠标进入元素的位置（上下左右）

最新