jQuery如何实现滑入滑出效果（跟随鼠标滑入滑出蒙板）

最新推荐文章于 2024-06-21 04:17:52 发布

田江

最新推荐文章于 2024-06-21 04:17:52 发布

阅读量3.3k

点赞数

分类专栏： jQuery JavaScript从入门到精通文章标签： jQuery 特效滑入滑出

本文链接：https://blog.csdn.net/jiang7701037/article/details/79144220

版权

JavaScript从入门到精通同时被 2 个专栏收录

147 篇文章 80 订阅

订阅专栏

jQuery

24 篇文章 2 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style: none
        }

        #box{
            position:relative;
            margin: 100px auto;
            width:300px;
            height:400px;
            background-image:url(img/timg1.jpg);
            background-size:300px 400px;
            border:1px solid black;
            overflow: hidden;
        }
        #zzc{
            position: absolute;
            width: 300px;
            height: 400px;
            background-color: red;
            opacity:0.4;
            left:-20000px;
        }
    </style>
</head>
<body style="height:1000px; width:1000px;">

    <div id="box">
        <div id="zzc"></div>
    </div>

</body>
</html>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function inDirection(evt) {
    //1、拿出鼠标距离四个边的距离
    //1)、盒子left，top，right，bottom
    let left= $("#box").offset().left;
    let top = $("#box").offset().top;
    let right = left+$("#box").width();
    let bottom = top+$("#box").height();

    //2)、计算鼠标距离每个边的距离
    let leftDis =Math.abs(left-evt.pageX);
    let rightDis =Math.abs(right-evt.pageX);
    let topDis =Math.abs(top-evt.pageY);
    let bottomDis =Math.abs(bottom-evt.pageY);

    let obj = {
        "左":leftDis,
        "上":topDis,
        "右":rightDis,
        "下":bottomDis
    }
    let min = obj["左"];
    let minKey = "左";
    for(let key in obj){
        if(obj[key]<min){
            min = obj[key];
            minKey = key;
        }
    }
    return minKey;
}

function leftIn() {
    $("#zzc").css({"left":-300});
    $("#zzc").animate({"left":0,"top":0},200);
}

function rightIn() {
    $("#zzc").css({"left":300});
    $("#zzc").animate({"left":0,"top":0},200);
}

function upIn() {
    $("#zzc").css({"top":-400});
    $("#zzc").animate({"left":0,"top":0},200);
}

function bottomIn() {
    $("#zzc").css({"top":400});
    $("#zzc").animate({"left":0,"top":0},200);
}

function leftOut() {
    $("#zzc").animate({"left":-300,"top":0},200);
}

function rightOut() {
    $("#zzc").animate({"left":300,"top":0},200);
}

function upOut() {
    $("#zzc").animate({"left":0,"top":-400},200);
}

function bottomOut() {
    $("#zzc").animate({"left":0,"top":400},200);
}

let inFuncObj ={
    "左":leftIn,
    "上":upIn,
    "右":rightIn,
    "下":bottomIn
};

let outFuncObj ={
    "左":leftOut,
    "上":upOut,
    "右":rightOut,
    "下":bottomOut
};

$(function () {
    $("#box").mouseenter(function (evt) {
        let direction = inDirection(evt);
        console.log("从"+direction+"边进入");
        inFuncObj[direction]();
    });

    $("#box").mouseleave(function (evt) {
        let direction = inDirection(evt);
        console.log("从"+direction+"边出去");
        outFuncObj[direction]();
    });
});

</script>