原生js+css調(diào)節(jié)音量滑塊
更新時(shí)間：2020年01月15日 11:55:14 作者：孫華鵬
這篇文章主要介紹了原生js+css調(diào)節(jié)音量滑塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js調(diào)節(jié)音量滑塊的具體代碼，供大家參考，具體內(nèi)容如下
效果
html部分
<body> <div class="all"> <p>當(dāng)前位置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 //鼠標(biāo)按下的位置
window.onmousemove = function (ev) {
let e = ev || window.event
let moveL = e.clientX - mouseX //鼠標(biāo)移動(dòng)的距離
let newL = boxL + moveL //left值
// 判斷最大值和最小值
if (newL < 0) {
newL = 0
}
if (newL >= cha) {
newL = cha
}
// 改變left值
box.style.left = newL + 'px'
// 計(jì)算比例
let bili = newL / cha * 100
p.innerHTML = '當(dāng)前位置' + Math.ceil(bili) + '%'
return false //取消默認(rèn)事件
}
window.onmouseup = function () {
window.onmousemove = false //解綁移動(dòng)事件
return false
}
return false
};
// 點(diǎn)擊音量條
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 = '當(dāng)前位置' + Math.ceil(bili) + '%'
console.log(left)
return false
}
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要分享了js封裝一個(gè)tab切換效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
js實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序表單彈窗實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
圖片Slider的效果想必大家都有見(jiàn)到過(guò)吧，下面使用js簡(jiǎn)單實(shí)現(xiàn)下，喜歡的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
Three.js如何實(shí)現(xiàn)霧化效果示例代碼
霧化效果是3D的比較常見(jiàn)的特性，在游戲中見(jiàn)到的煙霧、爆炸火焰以及白云等效果都是霧化的結(jié)果，下面這篇文章主要給大家介紹了關(guān)于Three.js如何實(shí)現(xiàn)霧化效果的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-09-09
elemetUi 組件--el-upload實(shí)現(xiàn)上傳Excel文件的實(shí)例
這篇文章主要介紹了elemetUi 組件--el-upload實(shí)現(xiàn)上傳Excel文件的實(shí)例的相關(guān)資料,希望通過(guò)本文大家能夠?qū)崿F(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
很多網(wǎng)站、博客把網(wǎng)頁(yè)生成html靜態(tài)頁(yè)面了，以利于搜索引擎的索引排名，減輕服務(wù)器負(fù)擔(dān)。靜態(tài)頁(yè)面由于其穩(wěn)定快速更快，給用戶及站長(zhǎng)帶來(lái)了方便。但評(píng)論后如何記住用戶的信息呢2012-01-01
IE6下JS動(dòng)態(tài)設(shè)置圖片src地址問(wèn)題
解決IE6下JS動(dòng)態(tài)設(shè)置圖片IMG的SRC時(shí)圖片無(wú)法加載錯(cuò)誤的方法2010-01-01
JsonServer安裝及啟動(dòng)過(guò)程圖解
這篇文章主要介紹了JsonServer安裝及啟動(dòng)過(guò)程圖解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
根據(jù)對(duì)象的某一屬性進(jìn)行排序的js代碼（如：name,age）
實(shí)例為按降序排列，若想改為升序只需把比較器中的value2-value1改為value1-value2就可以了2010-08-08