<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    用js實現調節音量滑塊的方法

    發布時間:2020-03-26 14:07:36 來源:億速云 閱讀:942 作者:小新 欄目:web開發

    今天小編分享的是用js實現調節音量滑塊的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下。

    用js實現調節音量滑塊的方法

    首先,我們來看一下效果:

    用js實現調節音量滑塊的方法

    html代碼:

    <body>
    <div class="all">
    <p>當前位置0%</p>
    <div class="bar">
    <div class="box"></div>
    </div>
    </div>
    </body>

    css代碼:

    <style>
    .all {
    width: 500px;
    height: 80px;
    margin: 100px auto;
    position: relative;
    }
    
    .bar {
    width: 500px;
    height: 20px;
    border-radius: 10px;
    background: #aaa;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    }
    
    .box {
    width: 30px;
    height: 30px;
    background: #000;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto 0;
    border-radius: 50%;
    cursor: pointer;
    transition: left 0.1s linear 0s;
    }
    </style>

    js代碼:

    <script>
    var box = document.getElementsByClassName('box')[0]
    var bar = document.getElementsByClassName('bar')[0]
    var all = document.getElementsByClassName('all')[0]
    var p = document.getElementsByTagName('p')[0]
    var cha = bar.offsetWidth - box.offsetWidth
    box.onmousedown = function (ev) {
    let boxL = box.offsetLeft
    let e = ev || window.event //兼容性
    let mouseX = e.clientX //鼠標按下的位置
    window.onmousemove = function (ev) {
    let e = ev || window.event
    let moveL = e.clientX - mouseX //鼠標移動的距離
    let newL = boxL + moveL //left值
    // 判斷最大值和最小值
    if (newL < 0) {
    newL = 0
    }
    if (newL >= cha) {
    newL = cha
    }
    // 改變left值
    box.style.left = newL + 'px'
    // 計算比例
    let bili = newL / cha * 100
    p.innerHTML = '當前位置' + Math.ceil(bili) + '%'
    return false //取消默認事件
    }
    window.onmouseup = function () {
    window.onmousemove = false //解綁移動事件
    return false
    }
    return false
    };
    // 點擊音量條
    bar.onclick = function (ev) {
    let left = ev.clientX - all.offsetLeft - box.offsetWidth / 2
    if (left < 0) {
    left = 0
    }
    if (left >= cha) {
    left = cha
    }
    box.style.left = left + 'px'
    let bili = left / cha * 100
    p.innerHTML = '當前位置' + Math.ceil(bili) + '%'
    console.log(left)
    return false
    }
    </script>

    關于用js實現調節音量滑塊的方法就分享到這里了,當然并不止以上和大家分析的辦法,不過小編可以保證其準確性是絕對沒問題的。希望以上內容可以對大家有一定的參考價值,可以學以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    js
    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2