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

来源：互联网发布：剑三成男恐怖脸型数据编辑：程序博客网时间：2024/06/09 14:17
这里写图片描述
<!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>
0 0