js进度条, 求指教

clipboard.png

如右图里面的进度条, 好久没有写这个东西了.印象中应该就是 onmousedown move up.然后计算鼠标的坐标的什么clientx offset......

有没有大神帮忙解释下要用怎么搞.真的不知道怎么下手了.

最好写下要用的几个关键的 如 哪些鼠标事件

阅读 1.7k
1 个回答

页面滚动进度同步变化你就自己写了吧

<!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">
            在生活中,我们最经常吃的水果,经常见到的水果可能有些人并,不知道它们是怎么长出来的。说到平时经常吃的水果大概就有苹果,梨,桃子,草莓。相信这些大家都知道是怎么长出来的,但是说到菠萝,榴莲,山竹这一些大家还知道它们是怎么长出来的吗?不知道的赶紧来看看。在生活中,我们最经常吃的水果,经常见到的水果可能有些人并,不知道它们是怎么长出来的。说到平时经常吃的水果大概就有苹果,梨,桃子,草莓。相信这些大家都知道是怎么长出来的,但是说到菠萝,榴莲,山竹这一些大家还知道它们是怎么长出来的吗?不知道的赶紧来看看。在生活中,我们最经常吃的水果,经常见到的水果可能有些人并,不知道它们是怎么长出来的。说到平时经常吃的水果大概就有苹果,梨,桃子,草莓。相信这些大家都知道是怎么长出来的,但是说到菠萝,榴莲,山竹这一些大家还知道它们是怎么长出来的吗?不知道的赶紧来看看。在生活中,我们最经常吃的水果,经常见到的水果可能有些人并,不知道它们是怎么长出来的。说到平时经常吃的水果大概就有苹果,梨,桃子,草莓。相信这些大家都知道是怎么长出来的,但是说到菠萝,榴莲,山竹这一些大家还知道它们是怎么长出来的吗?不知道的赶紧来看看。
        </div>
    </div>
</body>

</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题