javascript中间凸显滚动圆圈特效demo

最新推荐文章于 2023-08-15 11:06:00 发布

#麻辣小龙虾#

最新推荐文章于 2023-08-15 11:06:00 发布

阅读量921

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/CodingNoob/article/details/64253234

版权

javascript 专栏收录该内容

90 篇文章 1 订阅

订阅专栏

这里写图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=yes" name="format-detection" />
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="x5-fullscreen" content="true">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding-top: 100px;
        }

        .outbox {
            width: 800px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }

        .box {
            position: relative;
            left: -100px;
            height: 300px;
            width: 1000px;
            padding-top: 50px;
            margin: 50px auto;
            overflow: hidden;
        }

        .movebox {
            position: relative;
        }

        .box .movebox {
            position: relative;
            height: 120px;
            width: 2000px;
            margin: 0 auto;
            padding: 0;
            margin: 0;
        }

        .box .movebox li {
            width: 100px;
            height: 100px;
            float: left;
            list-style: none;
        }

        .box .movebox .active {
            width: 200px;
        }

        .box .movebox .active span {
            margin: auto;
            width: 100px;
        }

        .box .movebox li span {
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            line-height: 100px;
            text-align: center;
            font-size: 26px;
        }

        .middlemove {
            position: absolute;
            left: 400px;
            top: 0;
            height: 200px;
            width: 200px;
            overflow: hidden;
        }

        .middlemove .middlebox {
            position: relative;
            left: -800px;
            width: 20000px;
            height: 200px;
        }

        .middlemove li {
            height: 200px;
            width: 200px;
            float: left;
            list-style: none;
        }

        .middlemove li span {
            display: block;
            height: 200px;
            width: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 26px;
            color: #fff;
            border-radius: 100px;
        }

        button {
            width: 100px;
            height: 30px;
        }
    </style>

</head>

<body>
    <button class="prev">上一张</button>
    <button class="next">下一张</button>
    <div class="outbox">
        <div class="box">
            <ul class="movebox">
                <li><span style="background:red;">1</span></li>
                <li><span style="background:yellow;">2</span></li>
                <li><span style="background:blue;">3</span></li>
                <li><span style="background:green;">4</span></li>
                <li class="active"><span style="background:pink;">5</span></li>
                <li><span style="background:lightcoral;">6</span></li>
                <li><span style="background:blue;">7</span></li>
                <li><span style="background:green;">8</span></li>
                <li><span style="background:red;">9</span></li>
            </ul>
            <div class="middlemove">
                <ul class="middlebox">
                    <li><span style="background:red;">1</span></li>
                    <li><span style="background:yellow;">2</span></li>
                    <li><span style="background:blue;">3</span></li>
                    <li><span style="background:green;">4</span></li>
                    <li><span style="background:pink;">5</span></li>
                    <li><span style="background:lightcoral;">6</span></li>
                    <li><span style="background:blue;">7</span></li>
                    <li><span style="background:green;">8</span></li>
                    <li><span style="background:red;">9</span></li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script src="Util/jquery-1.11.3.min.js"></script>
<script>
    $(function() {

        var moveBox = $(".movebox");
        var moveWidth = $(".movebox li").width();
        var middlemove = $(".middlebox");
        var middlemoveWidth = $(".middlebox li").width();

        $(".prev").click(function() {

            //中间大的部分
            middlemove.animate({
                "left": "-=" + middlemoveWidth + "px"
            }, function() {
                //移除第一个子节点追加在末尾
                $(".middlebox").append($(".middlebox li").first()).css({
                    "left": "-800px" //重置left值
                });
            });

            //小的部分
            moveBox.animate({
                "left": "-=" + moveWidth + "px"
            }, function() {
                moveBox.find(".active").removeClass("active")
                    .next().addClass("active");
                $(".movebox").append($(".movebox li").first()).css({
                    "left": "0px"
                });
            });
        });

        $(".next").click(function() {
            //中间大的部分
            middlemove.animate({
                "left": "+=" + middlemoveWidth + "px"
            }, function() {
                $(".middlebox").prepend($(".middlebox li").last()).css({
                    "left": "-800px"
                });
            });


            moveBox.animate({
                "left": "+=" + moveWidth + "px"
            }, function() {
                moveBox.find(".active").removeClass("active")
                    .prev().addClass("active");
                $(".movebox").prepend($(".movebox li").last()).css({
                    "left": "0px"
                });
            });

        });
    });
</script>

</html>