脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-js实现滑动器效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 最近公司在做一个项目，页面中要用到滑动器效果，我的第一反应是使用HTML5 input类型中的range类型，但马上我就否定了这个想法，因为range类型存在浏览器的兼容性问题(在主流浏览器中)。但又不想在网上随便抄别人写的，于是就自己动手写了一个滑动器。
先贴上效果图：
滑动器的HTML代码如下：
<p class="ui-slide">
<input tyPE="text" value="0" />
<p class="slider-track">
<span class=";min">0</span><span class="slider-thumb"></span><span class="max">1000</span>
</p>
</p>
其实只要下面的代码就够了：
<p class="ui-slide">
<p class="slider-track">
<span class="slider-thumb"></span>
</p>
</p>
但是为了滑动效果看起来更形象，还加了一个输入框(用来动态显示滑动条的值)、还有最大值、最小值。
滑动器css代码如下：
复制代码
<style>
.ui-slide {
width: 400px;
margin: 0 auto;
/*margin-left: 100px;*/
text-align: center;
}
.slider-track {
/*width: 50%;*/
height: 15px;
border-radius: 1em;
border: 1px solid #AAAAAA;
background: linear-gradient(#E5E5E5, #f2F2F2) repeat scroll 0 0 #EEEEEE;
posITion: relative;
}
.slider-thumb {
display: block;
width: 28px;
height: 28px;
border: 1px solid grey;
border-radius: 1em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background: linear-gradient(#FAFAFA, #F6F6F6) repeat scroll 0 0 #FFFFFF;
position: absolute;
/*left: 0;*/
top: 50%;
margin: -15px 0 0 -15px;
}
input[type="text"] {
display: inline-block;
margin-bottom: 1em;
width: 3em;
text-align: center;
}
.min, .max {
position: absolute;
}
.min {
left: -30px;
}
.max {
right: -60px;
}
</style>
复制代码
上面的代码已经有滑动条的样子了，只是不能滑动。下面用js来控制滑动，先上代码：
复制代码
<script>
VAR sliderThumb = document.getElementsByClassName("slider-thumb")[0];
var input = document.getelementsbytagname("input")[0];
sliderThumb.style.left = "0px";
sliderThumb.onmousedown = function (evt) {
var oldX = evt.clientX;
var left = parseInt(that.style.left);
sliderThumb.onmouSEMove = function(evt) {
var x = evt.clientX - oldX;
that.style.left = left + x + "px";
if ( parseInt(that.style.left) < 0) {
that.style.left = 0;
}
if (parseInt(that.style.left) > 400) {
that.style.left = 400 + "px";
}
}
input .value = Math.ceil(parseInt(that.style.left) / 400 * 1000);
sliderThumb.onmouseup = function (evt) {
sliderThumb.onmouseup = null;
sliderThumb.onmousemove = null;
}
}
</script>
复制代码
由于style特性获取不到外部样式表或嵌入样式表的样式，所以需要用js设置sliderThumb.style.left="0px",否则后面获取sliderThumb.style.left的值都为空。
到这边其实滑动效果已经有了，但是有些问题，当鼠标移动的太快，就会出现鼠标脱离滑块，因为mouseover事件是绑定到滑块上的，一旦鼠标脱离滑块，就无法再调用Mousemove事件，无法调用mousemove事件，就无法定位滑块的位置，所以滑块就停止了。还有一个问题是，当你拖动滑块快速的移动鼠标，然后放开，再把鼠标悬浮在滑块上时，你会发现，鼠标悬浮在滑块上也能拖动滑块，原因是快速移动鼠标后，鼠标脱离滑块，当鼠标up时，本来mouseup是绑定在滑块上的，应该执行下面这个函数的来取消事件绑定：
sliderThumb.onmouseup = function (evt) {
sliderThumb.onmouseup = null;
sliderThumb.onmousemove = null;
}
但现在鼠标已经脱离滑块，mouseup时并不会执行上面的函数，所以滑块的mouseup并没有执行，这样就出现鼠标悬浮在滑块上时也能拖动滑块。
现在我们来解决上面出现的两个问题，把上面的js代码改成这样：
复制代码
<script>
var sliderThumb = document.getElementsByclassname("slider-thumb")[0];
var input = document.getElementsByTagName("input")[0];
sliderThumb.style.left = "0px";
sliderThumb.onmousedown = function (evt) {
var that = this;
var oldX = evt.clientX;
var left = parseInt(that.style.left);
document.onmousemove = function(evt) {
var x = evt.clientX - oldX;
that.style.left = left + x + "px";
if ( parseInt(that.style.left) < 0) {
that.style.left = 0;
}
if (parseInt(that.style.left) > 400) {
that.style.left = 400 + "px";
}
}
input.value = Math.ceil(parseInt(that.style.left) / 400 * 1000);
document.onmouseup = function (evt) {
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
复制代码
大家会发现，我把mousemove与mouseup事件都绑定到了document上，但mousedown事件还是绑定在滑块上。这样一来，即使鼠标移动太快脱离滑块，滑块也能移动，因为document上的mousemove事件只要鼠标还没松开就会执行。当mouseup时会执行这个函数：
document.onmouseup = function (evt) {
document.onmouseup = null;
document.onmousemove = null;
}
这样就取消了事件，就不会出现放开鼠标还能悬浮移动滑块的情况了。
这篇文章并没有考虑低版本的IE浏览器(ie9以下)，毕竟windows xp都退役了。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-js实现滑动器效果全部内容，希望文章能够帮你解决javascript代码实例教程-js实现滑动器效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。