JavaScript 美化滑块

美化滑块（拖动）

隐藏原有的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 美化滑块相关推荐

jQuery美化滑块
overflow=scroll默认滑块不美观,用插件进行美化 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
javaScript 美化上传文件框
美化上传文件按钮隐藏原有的按钮 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
javaScript 美化上传文件框（加预览移除效果）
美化上传文件按钮,并预览预览关键代码 inp.onchange=function(){var reader = new FileReader();reader.onloadend = functio ...
JavaScript过滑块模拟鼠标拖动（验证码）滑块
核心函数:createEvent.initMouseEvent.dispatchEvent function slide (id, offsetX) {var slider = document.ge ...
javaScript 美化radio
模拟radio 效果实现插件效果可以复制,不会相互影响 css样式 .radio label{padding: 10px 5px;display: inline-block;cursor: poin ...
html的slider怎么在图片下面,javascript – HTML5滑块.如何使用’noUiSlider’
下午好, 我正在尝试实现'noUIslider'滑动条(http://refreshless.com/nouislider/),即使在他们主页上的第一个例子也在努力. 我已经下载了各种css和js并将 ...
html表单下拉美化教程,用javascript实现select的美化的方法
论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的.昨天试着做了一下,基本实现的初级功能.拿出来和大家一起分享一下.先可以看一下预览效果:htt ...
Linux http网页美化,Linux_用javascript实现select的美化，论坛经常有人会问到用CSS如何 - phpStudy...
第一步:将表单中的select隐藏起来. 为什么?很简单,因为这家伙太顽固了,用css根本搞不出来你想要的.所以把它杀掉. 第二步:用脚本找到select标签在网页上的绝对位置. 我们在那个位置上用D ...
混淆工具JavaScript obfuscator中文帮助文档
JavaScript obfuscator JavaScript Obfuscator是一个免费并且功能强大的JavaScript混淆器,其中包含多种功能,可为您的源代码提供保护. 主要特征变量重命 ...

JavaScript 美化滑块

美化滑块（拖动）

JavaScript 美化滑块相关推荐

最新文章

热门文章