1.手風(fēng)琴相冊(cè)

elong.jpg

知識(shí)點(diǎn)1：a標(biāo)簽的偽類選擇器

:link 修改從未被訪問過狀態(tài)下的樣式
:visited 修改被訪問過的狀態(tài)下的樣式
:hover 修改鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)下的樣式
:active 修改鼠標(biāo)長(zhǎng)按狀態(tài)下的樣式

知識(shí)點(diǎn)2：過渡三要素

1.1必須要有屬性發(fā)生變化
1.2必須告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過渡效果
1.3必須告訴系統(tǒng)過渡效果持續(xù)時(shí)長(zhǎng)

原理

利用動(dòng)畫效果修改鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)下的樣式
鼠標(biāo)未懸停a標(biāo)簽時(shí)：?jiǎn)蝹€(gè)li標(biāo)簽的寬度=ul總寬度/li標(biāo)簽個(gè)數(shù)
鼠標(biāo)懸停a標(biāo)簽時(shí)：懸停li標(biāo)簽的寬度=圖片的寬度
鼠標(biāo)懸停a標(biāo)簽時(shí)：未懸停li標(biāo)簽的寬度=(ul總寬度-圖片的寬度)/(li標(biāo)簽個(gè)數(shù)-1)

網(wǎng)頁布局

特點(diǎn)

1.li標(biāo)簽包裹了一個(gè)遮罩層，增加了動(dòng)畫效果
2.分別給li標(biāo)簽增加了標(biāo)題和描述亦歉，增加可訪問性
3.通過背景圖片定位實(shí)現(xiàn)圖片居中

<div class="fold mt20 mb20">
        <div class="fold_wrap">
            <ul class="clearfix" id="sm">
                <li>
                    <a href="#" target="_blank">
                        <div class="mask_b">
                            <h4>園林酒店</h4></div>
                        <div class="pic_auto pic_auto1"></div>
                        <div class="adv_intro">有誰不愛泡溫泉涝涤？浸入霧氣蒸騰的泉水之中松逊，把身體泡成一片茶葉蹭秋，舒展輕盈。有比這更美妙的感覺嗎溅呢？</div>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <div class="mask_b">
                            <h4>情侶酒店</h4></div>
                        <div class="pic_auto pic_auto2"></div>
                        <div class="adv_intro">浪漫垦藏，是香閨圍籠里的曖昧，是燈火迷離颈畸，淚眼婆裟的唯美乌奇，是楊柳岸没讲、曉風(fēng)殘?jiān)轮械臒o語凝噎……</div>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <div class="mask_b">
                            <h4>設(shè)計(jì)師酒店</h4></div>
                        <div class="pic_auto pic_auto3"></div>
                        <div class="adv_intro">前衛(wèi)的酒店設(shè)計(jì)理念，獨(dú)具魅力的風(fēng)格礁苗，優(yōu)美的自然風(fēng)光才能有這樣頂級(jí)的酒店爬凑。</div>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <div class="mask_b">
                            <h4>青年旅舍</h4></div>
                        <div class="pic_auto pic_auto4"></div>
                        <div class="adv_intro">我為你煮一杯溫茶，斟一杯美酒试伙。讓我們席地而坐嘁信，聽你的夢(mèng)想。用你的只言片語裝點(diǎn)我們的夢(mèng)想博物館疏叨。</div>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <div class="mask_b">
                            <h4>特色客棧</h4></div>
                        <div class="pic_auto pic_auto5"></div>
                        <div class="adv_intro">在這里潘靖，你可以靜靜發(fā)呆，而不被人打擾考廉，只用細(xì)細(xì)品味它的美好秘豹；在這里，你能看見最美好的星星昌粤，能讓你找到最深的感動(dòng)既绕。</div>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <div class="mask_b">
                            <h4>海島酒店</h4></div>
                        <div class="pic_auto pic_auto6"></div>
                        <div class="adv_intro">不想過冬，厭倦沉重涮坐，就飛去熱帶的島嶼游泳凄贩，卸下包袱，放下壓力袱讹，讓自己的身與心疲扎，在這碧海藍(lán)天之中，享受一次超自然的洗禮捷雕。</div>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <div class="mask_b">
                            <h4>海外溫泉</h4></div>
                        <div class="pic_auto pic_auto7"></div>
                        <div class="adv_intro">因地形地質(zhì)的區(qū)別椒丧，世界各地的溫泉也千差萬別，選擇一處適合自己的溫泉救巷，5分鐘后壶熏，你會(huì)忘記自己，20分鐘后浦译，你會(huì)忘記世界棒假。</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

CSS樣式

    /*=============================  Reset start ====================================*/

    *{
        margin: 0;
        padding: 0;
    }

    body {
        font-size: 12px;
        font-family: arial, Verdana, Geneva, Helvetica;
        color: #555;
        line-height: 20px;   
    }

    ul {
        list-style: none;
    }

    /*=============================  Reset end ====================================*/
    .mb20 {
        margin-bottom: 20px;
    }

    .mt20 {
        margin-top: 20px;
    }

    /*fold*/
    .fold_wrap {
        width: 1120px;
        overflow: hidden;
        margin: 0 auto;
    }

    .fold_wrap ul {
        width: 1120px;
        height: 260px;
        margin: 0 auto;
        overflow: hidden;
    }

    .fold_wrap ul li {
        float: left;
        width: 160px;
        height: 260px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.5s;
    }

    .fold_wrap ul li .mask_b {
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .3);
    }
    
    .fold_wrap ul:hover li{
        width: 120px;
    }
    .fold_wrap ul li:hover{
        width: 400px;
    }
    .fold_wrap ul:hover .mask_b{
        display: block;
    }
    .fold_wrap ul li:hover .mask_b{
        display: none;
    }
 
    .fold_wrap ul li .mask_b h4 {
        color: #fff;
        width: 30px;
        margin: 0 auto;
        display: block;
        font: 30px/30px Microsoft Yahei;
        position: relative;
        padding: 30px 0 0 0;
    }

    .fold_wrap ul li .adv_intro {
        width: 92%;
        height: 40px;
        padding: 5px 4%;
        position: absolute;
        left: 0;
        bottom: -50px;
        background: #37D;
        color: #FFF;
        overflow: hidden;
    }

    .pic_auto {
        width: 100%;
        height: 100%;
    }

    .pic_auto1 {
        background: url(images/20150422_ifold1.jpg) no-repeat center 0;
    }

    .pic_auto2 {
        background: url(images/20150120_ifold2.jpg) no-repeat center 0;
    }

    .pic_auto3 {
        background: url(images/20150120_ifold3.jpg) no-repeat center 0;
    }

    .pic_auto4 {
        background: url(images/20150120_ifold4.jpg) no-repeat center 0;
    }

    .pic_auto5 {
        background: url(images/20150120_ifold5.jpg) no-repeat center 0;
    }

    .pic_auto6 {
        background: url(images/20150120_ifold6.jpg) no-repeat center 0;
    }

    .pic_auto7 {
        background: url(images/20150120_ifold7.jpg) no-repeat center 0;
    }

用JS實(shí)現(xiàn)

    <!-- cms js begin -->
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            var slideMenu=function(){
                var sp,st,t,m,sa,l,w,gw,ot;
                return{
                    destruct:function(){
                        if(m){
                            clearInterval(m.htimer);
                            clearInterval(m.timer);
                        }
                    },
                    build:function(sm,sw,mt,s,sl,h){
                        sp=s;
                        st=sw;
                        t=mt;
                        m=document.getElementById(sm);
                        sa=m.getElementsByTagName('li');
                        l=sa.length;
                        w=m.offsetWidth;
                        gw=w/l;
                        ot=Math.floor((w-st)/(l-1));
                        var i=0;
                        for(i;i<l;i++){
                            s=sa[i];
                            s.style.width=gw+'px';
                            this.timer(s)
                        }
                        if(sl!=null){
                            m.timer=setInterval(function(){
                                slideMenu.slide(sa[sl-1])
                            },t)}
                    },
                    timer:function(s){
                        s.onmouseover=function(){
                            clearInterval(m.htimer);
                            clearInterval(m.timer);
                            m.timer = setInterval(function(){
                                slideMenu.slide(s)
                            },t);
                            //console.log($(this).find('.mask_b').html());
                            $(this).find('.mask_b').hide();
                            //console.log($(this).find('.mask_b').attr("style"));
                        }
                        s.onmouseout=function(){
                            clearInterval(m.timer);
                            clearInterval(m.htimer);
                            m.htimer=setInterval(function(){
                                slideMenu.slide(s,true)
                            },t);
                            //console.log($(this).find('.mask_b').html());
                            $(this).find('.mask_b').show();
                            //console.log($(this).find('.mask_b').attr("style"));
                        }
                    },
                    slide:function(s,c){
                        var cw=parseInt(s.style.width);
                        if((cw<st && !c) || (cw>gw && c)){
                            var owt=0; var i=0;
                            for(i;i<l;i++){
                                if(sa[i]!=s){
                                    var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width);
                                    if(ow<gw && c){
                                        oi=Math.floor((gw-ow)/sp);
                                        oi=(oi>0)?oi:1;
                                        o.style.width=(ow+oi)+'px';
                                        //console.log(o);
                                        //console.log(o.style.width);
                                    }else if(ow>ot && !c){
                                        oi=Math.floor((ow-ot)/sp);
                                        oi=(oi>0)?oi:1;
                                        o.style.width=(ow-oi)+'px';
                                        //console.log(o);
                                        //console.log(o.style.width);
                                    }
                                    if(c){
                                        owt=owt+(ow+oi)
                                    }else{
                                        owt=owt+(ow-oi)
                                    }
                                }
                            }
                            s.style.width=(w-owt)+'px';
                        }else{
                            if(m.htimer)
                                clearInterval(m.htimer)
                            if(m.timer)
                                clearInterval(m.timer);
                        }
                    }
                };
            }();
            slideMenu.build('sm',400,10,10,1);
            $(window).resize(function(){
                if(slideMenu){
                    slideMenu.destruct();
                }
                slideMenu.build('sm',400,10,10,1);
            });
        });
    </script>

2.星星海

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body{
            background-color: #000;
        }

        span{
            width: 30px;
            height: 30px;
            background: url("images/star.png") no-repeat;
            position: absolute;
            background-size:100% 100%;
            animation: flash 1s alternate infinite;
        }
        
        @keyframes flash {
            0%{opacity: 0;}
            100%{opacity: 1;}
        }

        span:hover{
            transform: scale(3, 3) rotate(180deg) !important;
            transition: all 1s;
        }
    </style>
</head>
<body>

<script>
    window.onload = function () {
        // 1. 求出屏幕的尺寸
        var screenW = document.documentElement.clientWidth;
        var screenH = document.documentElement.clientHeight;

        // 2. 動(dòng)態(tài)創(chuàng)建星星
        for(var i=0; i<150; i++){
            // 2.1 創(chuàng)建星星
            var span = document.createElement('span');
            document.body.appendChild(span);

            // 2.2 隨機(jī)的坐標(biāo)
            var x = parseInt(Math.random() * screenW);
            var y = parseInt(Math.random() * screenH);
            span.style.left = x + 'px';
            span.style.top = y + 'px';

            // 2.3 隨機(jī)縮放
            var scale = Math.random() * 1.5;
            span.style.transform = 'scale('+ scale + ', ' + scale + ')';

            // 2.4 頻率
            var rate = Math.random() * 1.5;
            span.style.animationDelay = rate + 's';
        }
    }
</script>
</body>
</html>

3.照片墻

照片墻.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: none;
            list-style: none;
        }

        html, body, ul{
            width: 100%;
            height: 100%;
        }

        #ps{
            position: relative;
        }

        #ps li{
            width: 250px;
            height: 360px;
            box-shadow: 0 0 10px #000;

            position: absolute;

            transition: all 1s;
        }

        #ps li.current{
            left: 50% !important;
            top: 50% !important;
            transform: rotate(0deg) translate(-50%, -50%) scale(1.5, 1.5) !important;
            z-index: 99;
        }
    </style>
</head>
<body>
   <ul id="ps"></ul>
<script src="js/Underscore-min.js"></script>
<script>
    window.onload = function () {
        // 1. 獲取需要的標(biāo)簽
        var ps = document.getElementById("ps");

        // 2. 動(dòng)態(tài)創(chuàng)建li標(biāo)簽
        for(var i=0; i<10; i++){
            // 2.1 創(chuàng)建li標(biāo)簽
            var li = document.createElement("li");
            ps.appendChild(li);

            // 2.2 創(chuàng)建img標(biāo)簽
            var img = document.createElement("img");
            img.src = "images/pic" + (i + 1) + ".jpg";
            li.appendChild(img);
        }

        // 3. 獲取所有的li
        var allLis = ps.children;

        // 4. 求出屏幕的寬度和高度
        var screenW = document.documentElement.clientWidth - 250;
        var screenH = document.documentElement.clientHeight - 360;

        // 5. 遍歷
        for(var j=0; j<allLis.length; j++){
            // 5.1 取出單個(gè)li標(biāo)簽
            var li = allLis[j];

            // 5.2 隨機(jī)分布
            li.style.left = _.random(0, screenW) + 'px';
            li.style.top = _.random(0, screenH) + 'px';

            // 5.3 隨機(jī)角度
            li.style.transform = 'rotate(' + _.random(0, 360) +'deg)';

            // 5.4 監(jiān)聽點(diǎn)擊事件
            li.onclick = function () {
                for(var i = 0; i<allLis.length; i++){
                    allLis[i].className = '';
                }
                this.className = 'current';
            }
        }
    }
</script>
</body>
</html>

4.天貓彈性導(dǎo)航

天貓彈性導(dǎo)航.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border:0;
            list-style: none;
        }

        body{
            background-color: pink;
        }

        #nav{
            width: 900px;
            height: 63px;
            background:url("images/doubleOne.png") no-repeat right
            center #fff;
            border-radius: 5px;
            position: relative;
            margin: 100px auto;
        }

        #nav ul{
            position: relative;
        }

        #nav ul li{
            float: left;
            width: 88px;
            height: 63px;
            text-align: center;
            line-height: 70px;
            cursor: pointer;
        }

        #t_mall{
            width: 88px;
            height: 63px;
            background: url("images/tMall.png") no-repeat;
            position: absolute;
        }
    </style>
</head>
<body>
<nav id="nav">
    <span id="t_mall"></span>
    <ul>
        <li>雙11狂歡</li>
        <li>服裝會(huì)場(chǎng)</li>
        <li>數(shù)碼家電</li>
        <li>家具建材</li>
        <li>母嬰童裝</li>
        <li>手機(jī)會(huì)場(chǎng)</li>
        <li>美妝會(huì)場(chǎng)</li>
        <li>進(jìn)口會(huì)場(chǎng)</li>
        <li>飛豬旅行</li>
    </ul>
</nav>
<script>
    window.onload = function () {
        // 1. 獲取需要的標(biāo)簽
        var nav = $("nav");
        var t_mall = nav.children[0];
        var ul = nav.children[1];
        var allLis = ul.children;

        // 記錄鼠標(biāo)點(diǎn)擊的位置
        var beginX = 0;

        // 2. 遍歷
        for(var i=0; i<allLis.length; i++){
            var li = allLis[i];

            // 2.1 監(jiān)聽鼠標(biāo)進(jìn)入
            li.onmouseover = function () {
                end = this.offsetLeft;
            };

            // 2.2 監(jiān)聽鼠標(biāo)按下事件
            li.onmousedown = function () {
                beginX = this.offsetLeft;
            };

            // 2.2 監(jiān)聽鼠標(biāo)離開事件
            li.onmouseout = function () {
                end = beginX;
            }
        }

        // 3.緩動(dòng)動(dòng)畫
        var begin = 0, end =0;
        setInterval(function () {
            begin = begin + (end - begin) * 0.1;
            t_mall.style.left = begin + "px";
        }, 10);

        function $(id) {
            return typeof id === "string" ? document.getElementById(id) : null;
        }
    }
</script>
</body>
</html>

5.放大鏡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border:none
        }

        img{
            vertical-align: top;
        }

        #box{
            width: 350px;
            height: 350px;
            background-color: red;
            margin: 100px 0 0 100px;

            position: relative;
        }

        #small_box{
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;

            position: relative;
        }

        #small_box img{
            width: 350px;
            height: 350px;
        }

        #mask{
            width: 100px;
            height: 100px;
            background-color: rgba(255, 255, 0, .4);
            position: absolute;
            left: 0;
            top:0;
            cursor: move;


            display: none;
        }

        #big_box{
            width: 600px;
            height: 600px;
            border: 1px solid #ccc;
            overflow: hidden;

            position: absolute;
            left: 360px;
            top:0;

            display: none;
        }

        #list{
            margin: 20px 0 0 100px;
        }

        #list img{
            margin: 3px;
        }
    </style>
</head>
<body>
   <div id="box">
       <div id="small_box">
           <img src="images/pic001.jpg" alt="">
           <span id="mask"></span>
       </div>
       <div id="big_box">
           <img src="images/pic01.jpg" alt="" style="position: absolute; left:0; top:0;">
       </div>
   </div>
   <div id="list">
       <img src="images/pic0001.jpg" alt="">
       <img src="images/pic0002.jpg" alt="">
       <img src="images/pic0003.jpg" alt="">
   </div>
<script>
    window.onload = function () {
        // 1. 獲取需要的標(biāo)簽
        var box = document.getElementById("box");
        var small_box = box.children[0];
        var big_box = box.children[1];
        var mask = small_box.children[1];
        var big_img = big_box.children[0];
        var list_img = document.getElementById("list").children;
        
        // 2. 監(jiān)聽鼠標(biāo)進(jìn)入小盒子
        small_box.onmouseover = function () {
            // 2.1 把隱藏的內(nèi)容顯示
            mask.style.display = 'block';
            big_box.style.display = 'block';
            
            // 2.2 監(jiān)聽鼠標(biāo)的移動(dòng)
            small_box.onmousemove = function (event) {
                var event = event || window.event;

                // 2.3 求出鼠標(biāo)的坐標(biāo)
                var pointX = event.clientX - small_box.offsetParent.offsetLeft - mask.offsetWidth * 0.5;
                var pointY = event.clientY - small_box.offsetParent.offsetTop - mask.offsetHeight * 0.5;

                // 2.4 邊界檢測(cè)
                if(pointX < 0){
                    pointX = 0;
                }else if(pointX >= small_box.offsetWidth - mask.offsetWidth){
                    pointX = small_box.offsetWidth - mask.offsetWidth;
                }

                if(pointY < 0){
                    pointY = 0;
                }else if(pointY >= small_box.offsetHeight - mask.offsetHeight){
                    pointY = small_box.offsetHeight - mask.offsetHeight;
                }

                // 2.5 讓放大鏡移動(dòng)起來
                mask.style.left = pointX + 'px';
                mask.style.top = pointY + 'px';

                // 2.6 讓大圖移動(dòng)起來
                /*
                   smallX / bigX = smallBox.width / 大圖的寬度
                   bigX = smallX / ( smallBox.width / 大圖的寬度 )
                */
                big_img.style.left = - pointX / (small_box.offsetWidth / big_box.offsetWidth) + 'px';
                big_img.style.top = - pointY / (small_box.offsetHeight / big_box.offsetHeight) + 'px';
            }
        };

        // 3. 監(jiān)聽鼠標(biāo)離開小盒子
        small_box.onmouseout = function () {
            // 2.1 把隱藏的內(nèi)容顯示
            mask.style.display = 'none';
            big_box.style.display = 'none';
        };
        
        // 4. 遍歷列表圖片
        for(var i=0; i<list_img.length; i++){
            (function (i) {
                var img = list_img[i];
                img.onmouseover = function () {
                    small_box.children[0].src = "images/pic00"+ (i + 1) +".jpg";
                    big_img.src = "images/pic0"+ (i + 1) +".jpg"
                }
            })(i);
        }
    }
</script>
</body>
</html>

6.進(jìn)度條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }

        #progress{
            width: 1000px;
            height: 35px;
            line-height: 35px;
            /*background-color: #e8e8e8;*/
            margin: 100px auto;

            position: relative;
        }

        #progress_bar{
            width: 900px;
            height: 100%;
            background-color: #ccc;
            border-radius: 8px;

            position: relative;
        }

        #progress_value{
            position: absolute;
            right: 30px;
            top: 0;
        }

        #progress_bar_fg{
            width: 0;
            height: 100%;
            background-color: orangered;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        span{
            width: 25px;
            height: 50px;
            background-color: orangered;

            position: absolute;
            left: 0;
            top: -7px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="progress">
        <div id="progress_bar">
            <div id="progress_bar_fg"></div>
            <span></span>
        </div>
        <div id="progress_value">0%</div>
    </div>

<script>
    window.onload = function () {
        // 1. 獲取需要的標(biāo)簽
        var progress = document.getElementById("progress");
        var progress_bar = progress.children[0];
        var progress_bar_fg = progress_bar.children[0];
        var mask = progress_bar.children[1];
        var progress_value =  progress.children[1];

        // 2. 監(jiān)聽鼠標(biāo)按下
        mask.onmousedown = function (event) {
            var e = event || window.event;

            // 2.1 獲取初始位置
            var offsetLeft = event.clientX - mask.offsetLeft;

            // 2.2 監(jiān)聽鼠標(biāo)的移動(dòng)
            document.onmousemove = function (event) {
                var e = event || window.event;

                // 2.3 獲取移動(dòng)的位置
                var x = e.clientX - offsetLeft;

                // 邊界值處理
                if(x < 0){
                    x = 0;
                }else if(x >= progress_bar.offsetWidth - mask.offsetWidth){
                    x = progress_bar.offsetWidth - mask.offsetWidth;
                }

                // 2.4 走起來
                mask.style.left = x + 'px';
                progress_bar_fg.style.width = x + 'px';
                progress_value.innerHTML = parseInt(x / (progress_bar.offsetWidth - mask.offsetWidth) * 100) + '%';

                return false;
            };

            // 2.5 監(jiān)聽鼠標(biāo)抬起
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
    }
</script>
</body>
</html>

7.商品展示

商品展示.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border:none;
        }

        #box{
            width: 800px;
            height: 200px;
            border: 1px solid #ddd;

            position: relative;
            margin: 100px auto;

            overflow: hidden;
        }

        #box ul{
            width: 2600px;
            position: absolute;
            left: 0;
            top: 20px;
        }

        #box ul li{
            float: left;
        }

        #box_bottom{
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: #e8e8e8;

            width: 100%;
            height: 25px;
        }

        .mask{
            position: absolute;
            left: 0;
            top:0;
            height: 25px;
            background-color: orangered;
            border-radius: 12px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="box_top">
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
            <li><img src="images/img4.jpg" alt=""></li>
            <li><img src="images/img5.jpg" alt=""></li>
            <li><img src="images/img6.jpg" alt=""></li>
            <li><img src="images/img7.jpg" alt=""></li>
            <li><img src="images/img8.jpg" alt=""></li>
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
            <li><img src="images/img4.jpg" alt=""></li>
            <li><img src="images/img5.jpg" alt=""></li>
            <li><img src="images/img6.jpg" alt=""></li>
            <li><img src="images/img7.jpg" alt=""></li>
            <li><img src="images/img8.jpg" alt=""></li>
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
        </ul>
        <div id="box_bottom">
            <span class="mask"></span>
        </div>
    </div>

<script>
    window.onload = function () {
        // 1. 獲取需要的標(biāo)簽
        var box = document.getElementById("box");
        var box_top = document.getElementById("box_top");
        var box_bottom = document.getElementById("box_bottom");
        var mask = box_bottom.children[0];

        // 2. 設(shè)置滾動(dòng)條的長(zhǎng)度
        // 滾動(dòng)條長(zhǎng)度 = ( 盒子的寬度 / 內(nèi)容的寬度) * 盒子的寬度
        var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
        mask.style.width = mask_len + 'px';

        // 3. 鼠標(biāo)操作
        mask.onmousedown = function (event) {
            var e = event || window.event;

            // 3.1 求出初始值
            var beginX = e.clientX - mask.offsetLeft;

            // 3.2 移動(dòng)
            document.onmousemove = function (event) {
                var e = event || window.event;

                // 3.3 求出移動(dòng)的距離
                var endX = event.clientX - beginX;

                // 邊界值
                if(endX < 0){
                    endX = 0;
                }else if(endX >= box.offsetWidth - mask.offsetWidth){
                    endX = box.offsetWidth - mask.offsetWidth;
                }


                // 3.4 動(dòng)起來
                mask.style.left = endX + 'px';

                // 內(nèi)容走的距離 = （內(nèi)容的長(zhǎng)度 - 盒子的長(zhǎng)度） \/ (盒子長(zhǎng)度 - 滾動(dòng)條的長(zhǎng)度) * 滾動(dòng)條走的距離
                var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
                box_top.style.left = -content_len + 'px';

                return false;
            };

            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
    }
</script>
</body>
</html>