网页特效练习(1)

1.手风琴相册

elong.jpg

知识点1：a标签的伪类选择器

:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式

知识点2：过渡三要素

1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长

原理

利用动画效果修改鼠标悬停在a标签上状态下的样式
鼠标未悬停a标签时：单个li标签的宽度=ul总宽度/li标签个数
鼠标悬停a标签时：悬停li标签的宽度=图片的宽度
鼠标悬停a标签时：未悬停li标签的宽度=(ul总宽度-图片的宽度)/(li标签个数-1)

网页布局

特点

1.li标签包裹了一个遮罩层，增加了动画效果
2.分别给li标签增加了标题和描述，增加可访问性
3.通过背景图片定位实现图片居中

<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">浪漫，是香闺围笼里的暧昧，是灯火迷离，泪眼婆裟的唯美，是杨柳岸、晓风残月中的无语凝噎……</div>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <div class="mask_b">
                            <h4>设计师酒店</h4></div>
                        <div class="pic_auto pic_auto3"></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_auto4"></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_auto5"></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_auto6"></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_auto7"></div>
                        <div class="adv_intro">因地形地质的区别，世界各地的温泉也千差万别，选择一处适合自己的温泉，5分钟后，你会忘记自己，20分钟后，你会忘记世界。</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实现

    <!-- 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. 动态创建星星
        for(var i=0; i<150; i++){
            // 2.1 创建星星
            var span = document.createElement('span');
            document.body.appendChild(span);

            // 2.2 随机的坐标
            var x = parseInt(Math.random() * screenW);
            var y = parseInt(Math.random() * screenH);
            span.style.left = x + 'px';
            span.style.top = y + 'px';

            // 2.3 随机缩放
            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. 获取需要的标签
        var ps = document.getElementById("ps");

        // 2. 动态创建li标签
        for(var i=0; i<10; i++){
            // 2.1 创建li标签
            var li = document.createElement("li");
            ps.appendChild(li);

            // 2.2 创建img标签
            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 取出单个li标签
            var li = allLis[j];

            // 5.2 随机分布
            li.style.left = _.random(0, screenW) + 'px';
            li.style.top = _.random(0, screenH) + 'px';

            // 5.3 随机角度
            li.style.transform = 'rotate(' + _.random(0, 360) +'deg)';

            // 5.4 监听点击事件
            li.onclick = function () {
                for(var i = 0; i<allLis.length; i++){
                    allLis[i].className = '';
                }
                this.className = 'current';
            }
        }
    }
</script>
</body>
</html>

4.天猫弹性导航

天猫弹性导航.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>服装会场</li>
        <li>数码家电</li>
        <li>家具建材</li>
        <li>母婴童装</li>
        <li>手机会场</li>
        <li>美妆会场</li>
        <li>进口会场</li>
        <li>飞猪旅行</li>
    </ul>
</nav>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var nav = $("nav");
        var t_mall = nav.children[0];
        var ul = nav.children[1];
        var allLis = ul.children;

        // 记录鼠标点击的位置
        var beginX = 0;

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

            // 2.1 监听鼠标进入
            li.onmouseover = function () {
                end = this.offsetLeft;
            };

            // 2.2 监听鼠标按下事件
            li.onmousedown = function () {
                beginX = this.offsetLeft;
            };

            // 2.2 监听鼠标离开事件
            li.onmouseout = function () {
                end = beginX;
            }
        }

        // 3.缓动动画
        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. 获取需要的标签
        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. 监听鼠标进入小盒子
        small_box.onmouseover = function () {
            // 2.1 把隐藏的内容显示
            mask.style.display = 'block';
            big_box.style.display = 'block';
            
            // 2.2 监听鼠标的移动
            small_box.onmousemove = function (event) {
                var event = event || window.event;

                // 2.3 求出鼠标的坐标
                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 边界检测
                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 让放大镜移动起来
                mask.style.left = pointX + 'px';
                mask.style.top = pointY + 'px';

                // 2.6 让大图移动起来
                /*
                   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. 监听鼠标离开小盒子
        small_box.onmouseout = function () {
            // 2.1 把隐藏的内容显示
            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.进度条

<!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. 获取需要的标签
        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. 监听鼠标按下
        mask.onmousedown = function (event) {
            var e = event || window.event;

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

            // 2.2 监听鼠标的移动
            document.onmousemove = function (event) {
                var e = event || window.event;

                // 2.3 获取移动的位置
                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 监听鼠标抬起
            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. 获取需要的标签
        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. 设置滚动条的长度
        // 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
        var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
        mask.style.width = mask_len + 'px';

        // 3. 鼠标操作
        mask.onmousedown = function (event) {
            var e = event || window.event;

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

            // 3.2 移动
            document.onmousemove = function (event) {
                var e = event || window.event;

                // 3.3 求出移动的距离
                var endX = event.clientX - beginX;

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


                // 3.4 动起来
                mask.style.left = endX + 'px';

                // 内容走的距离 = （内容的长度 - 盒子的长度） \/ (盒子长度 - 滚动条的长度) * 滚动条走的距离
                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>