列表移入移出效果【源代码】

最新推荐文章于 2022-08-11 18:51:16 发布

小管打天下

最新推荐文章于 2022-08-11 18:51:16 发布

阅读量140

点赞数

分类专栏：代码专栏

本文链接：https://blog.csdn.net/qq_42647547/article/details/117880255

版权

代码专栏专栏收录该内容

13 篇文章 1 订阅

订阅专栏

index.html

<!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="wrap">
        <ul class="list">
            <li class="list-item active">
                <div class="card">
                    <div class="title">
                        <a href="">锤子 坚果 Pro 2 炭黑色（细红线版）全面双屏摄6+64GB 全网通</a>
                    </div>
                    <div class="price">￥2299.00</div>
                    <div class="img">
                        <a href="">
                            <img src="img/1.png" alt="">
                        </a>
                    </div>
                </div>
            </li>
            <li class="list-item">
                <div class="card">
                    <div class="title">
                        <a href="">小米MIX2 全面屏游戏手机6GB+64GB 黑色 全网通 4G手机 双卡双持</a>
                    </div>
                    <div class="price">￥3299.00</div>
                    <div class="img">
                        <a href="">
                            <img src="img/2.png" alt="">
                        </a>
                    </div>
                </div>
            </li>
            <li class="list-item">
                <div class="card">
                    <div class="title">
                        <a href="">Apple iPhone X（A1865）64GB 深空灰色 移动联通电信4G手机</a>
                    </div>
                    <div class="price">￥8388.00</div>
                    <div class="img">
                        <a href="">
                            <img src="img/3.png" alt="">
                        </a>
                    </div>
                </div>
            </li>
            <li class="list-item">
                <div class="card">
                    <div class="title">
                        <a href="">OPPO R11s 全面屏双摄拍照手机 全网通4G+64G 双卡双持手机 黑色</a>
                    </div>
                    <div class="price">￥2999.00</div>
                    <div class="img">
                        <a href="">
                            <img src="img/4.png" alt="">
                        </a>
                    </div>
                </div>
            </li>
            <li class="list-item">
                <div class="card">
                    <div class="title">
                        <a href="">三星 Galaxy Note8（SM-N9500）6GB+64GB 谜夜黑 移动联通电信4G手机</a>
                    </div>
                    <div class="price">￥6988.00</div>
                    <div class="img">
                        <a href="">
                            <img src="img/5.png" alt="">
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>

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

</html>

index.css

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

a{
    text-decoration:  none;
}

div,
li {
    box-sizing: border-box;
}

.wrap {
    width: 1200px;
    height: 200px;
    margin: 200px auto;
}

.wrap .list {
    height: 100%;
}

.wrap .list-item.active {
    width: 360px;
}

.wrap .list-item {
    position: relative;
    float: left;
    width: 210px;
    height: 100%;
    padding: 10px;
}


.wrap .list-item .card {
    height: 100%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.wrap .list-item .card .title {
    width: 170px;
    height: 80px;
}

.wrap .list-item .card .title a {
    color: #424242;
    font-size: 14px;
}

.wrap .list-item .card .title a:hover {
    color: red;
}

.wrap .list-item .card .price {
    width: 170px;
    height: 50%;
    line-height: 90px;
    font-size: 18px;
    color: red;
}

.wrap .list-item .card .img {
    position: absolute;
    bottom: 20px;
    right: 15px;
    width: 70px;
    height: 70px;
}

.wrap .list-item.active .card .img {
    width: 150px;
    height: 150px;
}

.wrap .list-item:hover .card {
    box-shadow: 0 0 10px #ccc;
}

.wrap .list-item .card .img img {
    width: 100%;
    height: 100%;
}

index.js

; (function (doc) {
    var oList = doc.getElementsByClassName('list')[0],
        oItems = doc.getElementsByClassName('list-item'),
        curIdx = 0;



    var init = function () {
        bindEvent()
    }

    // 写法一
    function bindEvent() {
        for (var i = 0; i < oItems.length; i++) {
            addEvent(oItems[i], 'mouseover', function () {
                oItems[curIdx].className = 'list-item';
                curIdx = Array.prototype.indexOf.call(oItems, this)
                oItems[curIdx].className += ' active';
            });
        }
    }

    // 写法二
    function bindEvent() {
        addEvent(oList, 'mouseover', slide);
    }

    function slide(e) {
        var e = e || window.event,
            tar = e.target || e.srcElement,
            oParent = getParent(tar, 'li'),
            thisIdx = Array.prototype.indexOf.call(oItems, oParent);

        if (curIdx !== thisIdx) {
            oItems[curIdx].className = 'list-item';
            curIdx = thisIdx;
            oItems[curIdx].className += ' active'
        }
        console.log(tar);
    }

    function getParent(target, element) {
        while (target.tagName.toLowerCase() !== element) {
            target = target.parentNode;
        }

        return target;
    }

    // 写法三
    // mouseover/out是短触发，只会触发一次
    // mousemove是长触发，会一直触发，它比over/out性能要好
    function bindEvent() {
        addEvent(oList, 'mouseover', function () {
            addEvent(document, 'mousemove', slide);
        });

        addEvent(oList, 'mouseout', function () {
            removeEvent(document, 'mousemove', slide);
        });
    }

    function slide(e) {
        var e = e || window.event,
            tar = e.target || e.srcElement,
            oParent = getParent(tar, 'li'),
            thisIdx = Array.prototype.indexOf.call(oItems, oParent);

        if (curIdx !== thisIdx) {
            oItems[curIdx].className = 'list-item';
            curIdx = thisIdx;
            oItems[curIdx].className += ' active'
        }
        console.log(tar);
    }

    function getParent(target, element) {
        while (target.tagName.toLowerCase() !== element) {
            target = target.parentNode;
        }

        return target;
    }

    init();

})(document)

小管打天下

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表移入移出效果【源代码】

index.html<!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"> <
复制链接

扫一扫

专栏目录