帮助中心

首页网页特效整站源码 PHP实例网站模版工具箱常用代码论坛游戏源码资源分享

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

浏览：1072次- 评论：1次- 发布时间：2017-12-20

Html

Css

Js

var leftTop = Math.atan2(1, -1);
var rightTop = Math.atan2(1, 1);
var rightBottom = Math.atan2(-1, 1);
var leftBottom = Math.atan2(-1, -1);
var pi = Math.atan2(0, -1);
$('.out').mouseenter(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 >= rightTop && now < leftTop) {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left top',
            'transform': 'rotate(-90deg)',
        })
        i = -90;
        var that = this
        timer = setInterval(function() {
            i += 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 0) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从上进入')
    } else if (now >= 0 && now < rightTop || now >= rightBottom && now < 0) {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'right bottom',
            'transform': 'rotate(90deg)',
        })
        i = 90;
        var that = this
        timer = setInterval(function() {
            i -= 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 0) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从右进入')
    } else if (now >= leftBottom && now < rightBottom) {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left bottom',
            'transform': 'rotate(90deg)',
        })
        i = 90;
        var that = this
        timer = setInterval(function() {
            i -= 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 0) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从下进入')
    } else {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left bottom',
            'transform': 'rotate(-90deg)',
        })
        i = -90;
        var that = this
        timer = setInterval(function() {
            i += 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 0) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从左进入')
    }
})

$('.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

素材牛VIP永久特权

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

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

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

讨论这个常用代码（1）回答他人问题或分享心得会奖励牛币

华***n

2017年12月21日

学习了感谢分享

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取

我的积分余额：0 已下载次数：1072

所需牛币：5 开始下载

牛币获取：签到、评论、充值 » 在线充值（10牛币=1元）

成为VIP可永久免积分下载全部常用代码 » 查看详情