JavaScript實(shí)現(xiàn)美化滑塊效果
更新時(shí)間：2019年05月17日 16:22:13 作者：wangsq-js
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)美化滑塊效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)美化滑塊效果的具體代碼，供大家參考，具體內(nèi)容如下
美化滑塊（拖動(dòng)）
隱藏原有的range 同步value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑塊</title>
<style>
.len{
width: 300px;
height: 6px;
background: #6c6;
border-radius: 3px;
margin-top:15px;
position: relative;
}
.len b{
display: inline-block;
height: 6px;
border-radius: 3px;
background: #900;
position: absolute;
}
.len span{
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background: #090;
z-index: 1;
top: -2px;
left: 0;
}
.len input[type=range]{
display: none;
}
</style>
</head>
<body>
<input type="range" min="0" max="500" value="0">
<input type="range" min="0" value="0">
<script>
var ranges=document.querySelectorAll("input[type=range]");
ranges.forEach(function(range){
var Div=document.createElement("div");
Div.className="len";
range.parentNode.insertBefore(Div,range);
var span=document.createElement("span");
var b=document.createElement("b");
Div.appendChild(span);
Div.appendChild(b);
Div.appendChild(range);
span.onmousedown=function(e){
var x=e.clientX-this.offsetLeft;
var maxL=Div.offsetWidth-span.offsetWidth;
var maxV=range.max || 100;
document.onmousemove=function(e){
var les=e.clientX-x;
if(les < 0)les=0;
if(les > maxL)les=maxL;
span.style.left=les+"px";
b.style.width=les+span.offsetWidth/2+"px";
range.value=les/maxL*maxV; //同步
e.preventDefault(); //阻止默認(rèn)事件
console.log(range.value)
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
})
</script>
</body>
</html>
插件都可以無(wú)限復(fù)制，刪除即是原有效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于JS組件實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證功能(代碼分享)
- 基于JavaScript實(shí)現(xiàn)拖動(dòng)滑塊效果
- Javascript實(shí)現(xiàn)滑塊滑動(dòng)改變值的實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)兼容PC端和移動(dòng)端滑塊拖動(dòng)選擇數(shù)字效果
- JS響應(yīng)鼠標(biāo)點(diǎn)擊實(shí)現(xiàn)兩個(gè)滑塊區(qū)間拖動(dòng)效果
- js用拖動(dòng)滑塊來控制圖片大小的方法
- Javascript 鼠標(biāo)移動(dòng)上去小三角形滑塊緩慢跟隨效果
- Javascript 鼠標(biāo)移動(dòng)上去 滑塊跟隨效果代碼分享
- 基于Vue.js實(shí)現(xiàn)tab滑塊效果
- js拖動(dòng)滑塊和點(diǎn)擊水波紋效果實(shí)例代碼
相關(guān)文章
HTML node相關(guān)的一些資料整理2010-01-01
javascript中BOM基礎(chǔ)知識(shí)總結(jié)
本文主要對(duì)javascript中BOM基礎(chǔ)知識(shí)進(jìn)行總結(jié)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
bootstrap多層模態(tài)框滾動(dòng)條消失的問題
本篇文章主要介紹了bootstrap多層模態(tài)框滾動(dòng)條消失的問題，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
javascript實(shí)現(xiàn)blob加密視頻源地址的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)blob加密視頻源地址的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
DataTables添加額外的查詢參數(shù)和刪除columns等無(wú)用參數(shù)實(shí)例
下面小編就為大家?guī)硪黄狣ataTables添加額外的查詢參數(shù)和刪除columns等無(wú)用參數(shù)實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
JavaScript中對(duì)象property的讀取和寫入方法介紹
這篇文章主要介紹了JavaScript中對(duì)象property的讀取和寫入方法介紹,本文講解了原型繼承鏈中property的讀取、原型繼承鏈中property的寫入等內(nèi)容,需要的朋友可以參考下2014-12-12
基于element-ui組件手動(dòng)實(shí)現(xiàn)單選和上傳功能
在用戶使用過程中提出一鍵導(dǎo)入的功能，需求如下:點(diǎn)擊導(dǎo)入按鈕顯示提示框，然后是單選框以及上傳按鈕。這篇文章主要介紹了基于element-ui組件手動(dòng)實(shí)現(xiàn)單選和上傳功能,需要的朋友可以參考下2018-12-12
HTML5游戲引擎LTweenLite實(shí)現(xiàn)的超帥動(dòng)畫效果(附demo源碼下載)
這篇文章主要介紹了HTML5游戲引擎LTweenLite實(shí)現(xiàn)的超帥動(dòng)畫效果,詳細(xì)分析了LTweenLite的下載,動(dòng)畫效果的實(shí)現(xiàn)步驟,并附帶完整的demo實(shí)例源碼供讀者下載,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義導(dǎo)航欄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
js中AppendChild與insertBefore的用法詳細(xì)解析
這篇文章主要是對(duì)js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12