06 - 横向滚动条展示

---

HTML结构

<div class="show" id="showBox">
    <ul class="showTop" id="content">
        <li>![](images/img1.jpg)</li>
        <li>![](images/img2.jpg)</li>
        <li>![](images/img3.jpg)</li>
        <li>![](images/img4.jpg)</li>
        <li>![](images/img5.jpg)</li>
        <li>![](images/img1.jpg)</li>
        <li>![](images/img7.jpg)</li>
        <li>![](images/img8.jpg)</li>
        <li>![](images/img5.jpg)</li>
        <li>![](images/img6.jpg)</li>
        <li>![](images/img3.jpg)</li>
        <li>![](images/img2.jpg)</li>
        <li>![](images/img4.jpg)</li>
        <li>![](images/img8.jpg)</li>
        <li>![](images/img1.jpg)</li>
        <li>![](images/img7.jpg)</li>
    </ul>
    <div class="showBootom">
        <span></span>
    </div>
</div>

Css样式

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .show {
            width: 800px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }

        .showTop {
            margin-top: 22px;
            width: 2080px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .showTop li {
            float: left;
        }

        .showBootom {
            width: 800px;
            height: 25px;
            background: #e8e8e8;
            position: absolute;
            left: 0;
            bottom: 0;

        }

        .showBootom span {
            width: 0;
            height: 25px;
            background: #f40;
            border-radius: 12px;
            position: absolute;
            left: 0;
            bottom: 0;
            cursor: pointer;
        }
</style>

Js代码

<script>
        window.onload = function () {
            // 获取标签
            var showBox = document.getElementById('showBox');
            var content = showBox.children[0];
            var drag = showBox.children[1].children[0];
            // 计算滚动条长度
            // 滚动条长度公式 (盒子的宽度 / 内容的宽度) * 盒子的宽度
            var dragLength = (showBox.offsetWidth / content.offsetWidth) * showBox.offsetWidth;
            drag.style.width = dragLength + 'px';
            drag.onmousedown = function (e) {
                var e = e || event;
                // 求出初始距离
                var beginX = e.clientX - drag.offsetLeft;
                document.onmousemove = function (e) {
                    var e = e || event;
                    // 滚动条走的距离
                    var endX = e.clientX - beginX;
                    if (endX < 0) {
                        endX = 0;
                    }
                    else if (endX >= showBox.offsetWidth - drag.offsetWidth) {
                        endX = showBox.offsetWidth - drag.offsetWidth;
                    }
                    // 求出内容走的长度
                    // 内容走的距离 = (内容的长度 - 盒子的长度) / (盒子的长度 - 滚动条的长度) *滚动条走的距离
                    var contentLength = (content.offsetWidth - showBox.offsetWidth) / (showBox.offsetWidth - drag.offsetWidth) * endX;

                    content.style.left = - contentLength + 'px';

                    drag.style.left = endX + 'px';

                    return false;
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
                /*
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                */

            }
        }
</script>

特效展示

横向滚动条