判断鼠标移入方向

Posted hiteme

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了判断鼠标移入方向相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container wrap clearfix">
        <ul class="clearfix">
            <li class="outer"><img src="./img/timg4.jpg" alt="">
                <div class="back"><img src="./img/cp1.jpg" alt=""></div>
            </li>
            <li class="outer"><img src="./img/timg5.jpg" alt="">
                <div class="back"><img src="./img/cp2.jpg" alt=""></div>
            </li>
            <li class="outer"><img src="./img/timg6.jpg" alt="">
                <div class="back"><img src="./img/cp3.jpg" alt=""></div>
            </li>
            <li class="outer"><img src="./img/timg7.jpg" alt="">
                <div class="back"><img src="./img/cp4.jpg" alt=""></div>
            </li>
            <li class="outer"><img src="./img/timg8.jpg" alt="">
                <div class="back"><img src="./img/cp5.jpg" alt=""></div>
            </li>
            <li class="outer"><img src="./img/timg9.jpg" alt="">
                <div class="back"><img src="./img/cp6.jpg" alt=""></div>
            </li>
        </ul>

    </div>
    <script src="./js/index.js"></script>
</body>

</html>
*{
    margin: 0;
    padding:0;
    list-style:none;
}
.wrap{
    margin-top: 200px;
    width: 680px;
}
.wrap ul{
    padding: 10px;
}
.wrap ul li{
    position: relative;
    float: left;
    width: 200px;
    height: 200px;
    z-index: 1;
    margin: 10px;
    overflow: hidden;
    
}
.wrap ul li div{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    z-index: -1;
    height: 200px;
    transition: transform 0.3s;
    transform-origin: left bottom;    
    transform: rotateZ(-90deg);
}
.wrap ul img{
    width: 100%;
    height: 100%;
}
.wrap ul li div.back_left{
    transform: rotateZ(0deg);
    z-index: 2;
}
.wrap ul li div.back_right{
    transform-origin: right top;
    transform: rotateZ(0deg);
    z-index: 2;
}
.wrap ul li div.back_top{
    transform-origin: left top;
    transform: rotateZ(0deg);
    z-index: 2;
}
.wrap ul li div.back_bottom{
    transform-origin: right bottom;
    transform: rotateZ(0deg);
    z-index: 2;
}
/* 去浮动 */
.clearfix::before, .clearfix::after{
    content: ".";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
.clearfix::after{clear: both;}
.clearfix{
     *zoom: 1;/*IE/7/6 */
}
// 获取鼠标在页面中的位置,处理浏览器兼容性
function getPage(e) {
    var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
    var pageY = e.pageY || e.clientY + getScroll().scrollTop;
    return {
        pageX: pageX,
        pageY: pageY
    }
};

var wrap = document.getElementsByClassName(‘wrap‘)[0];
var oUl = wrap.getElementsByTagName(‘ul‘)[0];
var aLi = oUl.getElementsByTagName(‘li‘);
var newAli = Array.prototype.slice.call(aLi);
newAli.forEach(function (index) {
    index.onmouseenter = direction ;
});
function direction (e) {
    e = e || window.event;
    var x;
    var y;
    // 鼠标位置是否小于当前li的一半,如果小于  用鼠标位置减去li的位置,如果不小于,用鼠标位置减去li位置再减去li的大小
    // 当鼠标经过li时,x轴y轴必有大小,最小的值就是鼠标移入的方向
    x = Math.abs(getPage(e).pageX - this.offsetLeft) > this.offsetWidth / 2 ? getPage(e).pageX - this.offsetLeft - this.offsetWidth : getPage(e).pageX - this.offsetLeft;
    y = Math.abs(getPage(e).pageY - this.offsetTop) > this.offsetHeight / 2 ? getPage(e).pageY - this.offsetTop - this.offsetHeight : getPage(e).pageY - this.offsetTop;
    var oDiv = this.getElementsByTagName(‘div‘)[0];
    // 如果鼠标x轴位置减去li的位置小于li宽度的一半,证明鼠标位置在li的左侧,此时比较x与y的大小,小的就是鼠标移入的方向
    if (Math.abs(getPage(e).pageX - this.offsetLeft) < this.offsetWidth / 2 && Math.abs(x) <= Math.abs(y)) {
        oDiv.classList.add(‘back_left‘);
    }
    // 如果鼠标x轴位置减去li位置大于li宽度的一半,证明鼠标在li的右侧,此时比较x与y的大小,小的就是鼠标移入的方向
    if (Math.abs(getPage(e).pageX - this.offsetLeft) > this.offsetWidth / 2 && Math.abs(x) <= Math.abs(y)) {
        oDiv.classList.add(‘back_right‘);
    }
    // 如果鼠标y轴位置减去li的位置大于li高度的一半,证明鼠标在li的下方,此时比较x与y的大小,小的就是鼠标移入的方向
    if (Math.abs(getPage(e).pageY - this.offsetTop) > this.offsetHeight / 2 && Math.abs(x) >= Math.abs(y)) {
        oDiv.classList.add(‘back_bottom‘);
    }
    // 如果鼠标y轴位置减去li的位置小于li高度的一半,证明鼠标在li的上方,此时比较x与y的大小,小的就是鼠标移入的方向
    if (Math.abs(getPage(e).pageY - this.offsetTop) < this.offsetHeight / 2 && Math.abs(x) >= Math.abs(y)) {
        oDiv.classList.add(‘back_top‘);
    }
    this.onmouseleave = function () {
        oDiv.className = ‘back‘;
    }
}

 

以上是关于判断鼠标移入方向的主要内容,如果未能解决你的问题,请参考以下文章

判断鼠标移入元素方向

判断鼠标移入方向

判断鼠标的移入方向

比如一个div元素,当鼠标mouseover事件触发时,我想知道从上左下右哪个方向移入进去的.

跟随鼠标移动的遮罩层

JS实现穿墙效果(判断鼠标划入划出的方向)