JavaScript实现美化滑块效果
本文实例为大家分享了js实现美化滑块效果的具体代码，供大家参考，具体内容如下
美化滑块（拖动）
隐藏原有的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(); //阻止默认事件
console.log(range.value)
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
})
</script>
</body>
</html>
插件都可以无限复制，删除即是原有效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Javascript实现滑块滑动改变值的实现代码
最近做了一个关于税务的功能,值得一说的是本页面的滑块实现.大家都知道现实中的程序员大部分都是对于页面和美工不是很熟悉. 本人也是,但是本人比较喜欢自己动手来实现.废话不多说.上图: 实现结果: 部分js代码: 复制代码 代码如下: window.onload = function () { var oWin = document.getElementById("win"); var bDrag = false; var disX = disY = 0; oWin.onmousedown
-
js用拖动滑块来控制图片大小的方法
本文实例讲述了js用拖动滑块来控制图片大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title&g
-
基于JavaScript实现拖动滑块效果
本文实例为大家分享了js拖动滑块效果的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content=&q
-
JS响应鼠标点击实现两个滑块区间拖动效果
本文实例讲述了JS实现的两个滑块区间拖动效果代码.分享给大家供大家参考,具体如下: 网页上的滑块功能如何实现呢?其实用JS就可以,这就是一个网页滑块,两个滑块可以任意拖动,形成一个滑块区间,而且代码兼容IE和其它主流的浏览器,两个滑块确定一个区间范围. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hkqj-td-style-codes/ 具体代码如下: <!DOCTYPE html> <html> <head>
-
js实现兼容PC端和移动端滑块拖动选择数字效果
本文为大家分享了js实现移动端滑块拖动选择数字的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="viewport&qu
-
js拖动滑块和点击水波纹效果实例代码
拖动滑块效果: 先看看效果图: <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <t
-
基于Vue.js实现tab滑块效果
本文实例为大家分享了Vue.js实现tab滑块效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met
-
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
先来一张截图. 鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随. 不管有多少个都可以. javascript code: 复制代码 代码如下: function changeCoord(id, left) { $$(id).style.left = left; } function $$(id) { return document.getElementById(id); } function $$$(id) { return document.getElementsByCla
-
Javascript 鼠标移动上去 滑块跟随效果代码分享
先来一张截图. 鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随.不管有多少个都可以.javascript code: 复制代码 代码如下: function changeCoord(id, left) { $$(id).style.left = left;} function $$(id) { return document.getElementById(id);} function $$$(id) { return document.getElementsByClassNam
-
基于JS组件实现拖动滑块验证功能(代码分享)
拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m