js 寫一個捲軸

最後更新：2018-09-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：20px nbsp name script utf-8 document ima event width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自己練習寫一個捲軸</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .scroll{
            margin:200px;
            width:500px;
            height:5px;
            background: #ccc;
            position: relative;
        }
        .bar{
            width:10px;
            height:20px;
            background: #369369;
            position: absolute;
            top:-7px;
            left:0;
            cursor: pointer;
        }
        .mask{
            position: absolute;
            left:0;
            top:0;
            background: #369369;
            width:0px;
            height:5px;
        }
    </style>
</head>
<body>
    <div class="scroll" id="scroll">
        <div class="bar" id="bar"></div>
        <div class="mask" id="mask"></div>
    </div>
    <p></p>
    <script>
        window.onload = function(){
            var scroll = document.getElementById(‘scroll‘);
            var bar = document.getElementById(‘bar‘);
            var mask = document.getElementById(‘mask‘);
            var ptxt = document.getElementsByTagName(‘p‘)[0];
            bar.onmousedown = function (event){
                // Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鍵的狀態。
                // 事件通常與函數結合使用，函數不會在事件發生前被執行！
                var event = event || window.event;
                //相對於瀏覽器的x軸距離，，，      相對於父元素的左內邊距的距離
                // 擷取到點擊軸的距離螢幕的距離
                var leftVal = event.clientX - this.offsetLeft;
                console.log(leftVal);
                var that = this;
                //拖動
                document.onmousemove = function(event){
                    var event = event || window.event;
                    // 擷取移動的x軸距離，可能是正值，負值，
                    var barleft = event.clientX-leftVal;
                    //console.log(barleft);
                    console.log(scroll.offsetWidth);
                    console.log(bar.offsetWidth)
                    if(barleft<0){
                        barleft = 0;
                        //offsetWidth：元素在水平方向上佔據的大小，無單位
                    }else if(barleft > scroll.offsetWidth - bar.offsetWidth){
                        barleft = scroll.offsetWidth - bar.offsetWidth;

                    }
                    mask.style.width = barleft+‘px‘;
                    that.style.left = barleft+‘px‘;
                    ptxt.innerHTML = ‘已經走啦‘ + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth)*100)+‘%‘;
                    //擷取游標的當前位置，這個是相容寫法，後面的是ie8及以下的，
                    
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            };
            document.onmouseup = function(){
                document.onmousemove = null; //彈起滑鼠不做任何操作
            }
        }
    </script>
</body>
</html>

js 寫一個捲軸

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More