问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js进度条, 求指教

头像
荆棘鸟
    39863551

    clipboard.png

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

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

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

    csshtmljavascript
    阅读 1.8k
    1 个回答
    得票最新
    头像
    陌路凡歌
      7.9k21119
      ✓ 已被采纳

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

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