鼠标划入划出

最新推荐文章于 2024-05-30 17:34:36 发布

晴天有点孤单

最新推荐文章于 2024-05-30 17:34:36 发布

阅读量1k

点赞数 1

分类专栏： # JavaScript 晴天有点孤单文章标签：鼠标划入划出-方向

本文链接：https://blog.csdn.net/qq_39517820/article/details/77855715

版权

晴天有点孤单同时被 2 个专栏收录

124 篇文章 3 订阅

订阅专栏

JavaScript

50 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 360px;
        }

        .box ul {
            width: 100%;
            height: 360px;
            margin: 50px auto;
        }

        .box ul li {
            width: 230px;
            height: 360px;
            float: left;
            position: relative;
            list-style: none;
            margin-left: 20px;
            overflow: hidden;
        }

        .box ul li a {
            display: block;
            width: 230px;
            height: 360px;
            background: url(img/new-bg.png) repeat;
            left: 0;
            position: absolute;
            top: 360px;
            text-align: center;
            overflow: hidden;
        }

        .box ul li a p {
            color: #fff;
        }

        .box ul li a p:first-child {
            margin-top: 70%;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="img/150319506733331836.jpg" />
                <a>
                    <p>品牌钜惠</p>
                    <p>点击进入</p>
                </a>
            </li>
            <li>
                <img src="img/150319511293266411.jpg" />
                <a>
                    <p>时尚女装 潮流穿搭</p>
                    <p>点击进入</p>
                </a>
            </li>
            <li>
                <img src="img/150319514782076693.jpg" />
                <a>
                    <p>秋装上新</p>
                    <p>点击进入</p>
                </a>
            </li>
            <li>
                <img src="img/150319518051352431.jpg" />
                <a>
                    <p>潮流穿搭 时尚钜惠</p>
                    <p>点击进入</p>
                </a>
            </li>
            <li>
                <img src="img/150319521855064477.jpg" />
                <a>
                    <p>经典手表</p>
                    <p>点击进入</p>
                </a>
            </li>
        </ul>
    </div>
</body>
<script src="jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(".box ul li").hover(function(e) {
        var e = e || event;
        move.call(this, e, true)
    }, function(e) {
        var e = e || event;
        move.call(this, e, false)
    });
    function move(e, bool) {
        let top = $(this).offset().top;
            bottom = top + $(this).height();
            left = $(this).offset().left;
            right = left + $(this).width();
            height = $(this).height();
            width = $(this).width();
            x = e.pageX;
            y = e.pageY;
            sT = Math.abs(y - top);
            sB = Math.abs(y - bottom);
            sL = Math.abs(x - left);
            sR = Math.abs(x - right);
            a = Math.min(sT, sB, sL, sR);
        switch(a) {
            case sT:
                if(bool) {
                    $(this).find("a").css({
                        top: -height + "px",
                        left: 0
                    }).stop().animate({
                        top: 0,
                        left: 0
                    }, 300)
                } else {
                    $(this).find("a").stop().animate({
                        top: -height + "px",
                        left: 0
                    }, 300)
                }
                console.log("上")
                break;
            case sB:
                if(bool) {
                    $(this).find("a").css({
                        top: height + "px",
                        left: 0
                    }).stop().animate({
                        top: 0,
                        left: 0
                    }, 300)
                } else {
                    $(this).find("a").stop().animate({
                        top: height + "px",
                        left: 0
                    }, 300)
                }

                console.log("下")
                break;
            case sL:
                if(bool) {
                    $(this).find("a").css({
                        top: 0,
                        left: -width + "px"
                    }).stop().animate({
                        top: 0,
                        left: 0
                    }, 300)
                } else {
                    $(this).find("a").stop().animate({
                        top: 0,
                        left: -width + "px"
                    }, 300)
                }

                console.log("左")
                break;
            case sR:
                if(bool) {
                    $(this).find("a").css({
                        top: 0,
                        left: width + "px"
                    }).stop().animate({
                        top: 0,
                        left: 0
                    }, 300)
                } else {
                    $(this).find("a").stop().animate({
                        top: 0,
                        left: width + "px"
                    }, 300)
                }
                console.log("右")
                break;
            default:
                break;
        }
    }
</script>

晴天有点孤单

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
鼠标划入划出

<head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { width: 100%; height: 360px;
复制链接

扫一扫