js進(jìn)度條, 求指教

如右圖里面的進(jìn)度條, 好久沒有寫這個東西了.印象中應(yīng)該就是 onmousedown move up.然后計算鼠標(biāo)的坐標(biāo)的什么clientx offset......

有沒有大神幫忙解釋下要用怎么搞.真的不知道怎么下手了.

最好寫下要用的幾個關(guān)鍵的如哪些鼠標(biāo)事件

回答

編輯回答

深記你

頁面滾動進(jìn)度同步變化你就自己寫了吧

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1 {
            width: 600px;
            height: 20px;
            background: #CCCCCC;
            position: relative;
            margin: auto;
        }

        #div2 {
            width: 20px;
            height: 20px;
            background: #000000;
            position: absolute;
            top: 0;
            left: 0;
        }

        #div3 {
            width: 400px;
            height: 300px;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }

        #div4 {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv1 = document.getElementById('div1')
            var oDiv2 = document.getElementById('div2')
            var oDiv3 = document.getElementById('div3')
            var oDiv4 = document.getElementById('div4')
            var disX = 0;
            oDiv2.onmousedown = function (ev) {
                var oEvent = ev || event;
                disX = oEvent.clientX - oDiv2.offsetLeft;
                document.onmousemove = function (ev) {
                    var oEvent = ev || event;
                    var l = oEvent.clientX - disX;
                    if (l < 0) {
                        l = 0;
                    } else if (l > oDiv1.offsetWidth - oDiv2.offsetWidth) {
                        l = oDiv1.offsetWidth - oDiv2.offsetWidth
                    }
                    oDiv2.style.left = l + 'px';
                    var scale = l / (oDiv1.offsetWidth - oDiv2.offsetWidth);

                    oDiv4.style.top = -scale * (oDiv4.offsetHeight - oDiv3.offsetHeight) + 'px';
                }
                document.onmouseup = function (ev) {
                    var oEvent = ev || event;
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            }

        }
    </script>
</head>

<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
    <div id="div3">
        <div id="div4">
            在生活中，我們最經(jīng)常吃的水果，經(jīng)常見到的水果可能有些人并，不知道它們是怎么長出來的。說到平時經(jīng)常吃的水果大概就有蘋果，梨，桃子，草莓。相信這些大家都知道是怎么長出來的，但是說到菠蘿，榴蓮，山竹這一些大家還知道它們是怎么長出來的嗎？不知道的趕緊來看看。在生活中，我們最經(jīng)常吃的水果，經(jīng)常見到的水果可能有些人并，不知道它們是怎么長出來的。說到平時經(jīng)常吃的水果大概就有蘋果，梨，桃子，草莓。相信這些大家都知道是怎么長出來的，但是說到菠蘿，榴蓮，山竹這一些大家還知道它們是怎么長出來的嗎？不知道的趕緊來看看。在生活中，我們最經(jīng)常吃的水果，經(jīng)常見到的水果可能有些人并，不知道它們是怎么長出來的。說到平時經(jīng)常吃的水果大概就有蘋果，梨，桃子，草莓。相信這些大家都知道是怎么長出來的，但是說到菠蘿，榴蓮，山竹這一些大家還知道它們是怎么長出來的嗎？不知道的趕緊來看看。在生活中，我們最經(jīng)常吃的水果，經(jīng)常見到的水果可能有些人并，不知道它們是怎么長出來的。說到平時經(jīng)常吃的水果大概就有蘋果，梨，桃子，草莓。相信這些大家都知道是怎么長出來的，但是說到菠蘿，榴蓮，山竹這一些大家還知道它們是怎么長出來的嗎？不知道的趕緊來看看。
        </div>
    </div>
</body>

</html>

2018年9月21日 05:10