介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=皍tf-8"比;
,& lt; style 类型=拔谋?css"比;
,* {
,保证金:0;
,填充:0;
,}
,# slider-box {
,宽度:300 px;
,高度:50 px;
,这个特性:4 px;
,背景:# ccc;
,保证金:250 px 汽车;
,位置:相对;
,}
,# slider {
,宽度:48 px;
,高度:48 px;
,边界:1 px solid # eee;
,text-align:中心;
,行高:48 px;
,显示:inline-block;
,背景:# fff;
,这个特性:4 px;
,光标:移动;
,位置:绝对;
,左:0;
,z - index: 5;
,}
,# slider-text {
,text-align:中心;
,行高:50 px;
,显示:inline-block;
,宽度:100%;
,高度:50 px;
,字体类型:“微软雅黑“;
,位置:绝对;
,左:0;
,z - index: 4;
,}
,# slider-bg {
,宽度:0;
,高度:48 px;
,背景:绿色;
,位置:绝对;
,z - index: 3;
,这个特性:4 px;
,}
,# slider-Emerge {
,宽度:100 px;
,背景:;
,高度:50 px;
,位置:绝对;
,}
,# stop-go {
,宽度:48 px;
,高度:48 px;
,边界:1 px solid # eee;
,背景:# 36 f;
,位置:绝对;
,右:1 px;
,显示:没有;
,text-align:中心;
,行高:48 px;
,颜色:# fff;
,字体类型:“微软雅黑“;
,这个特性:4 px;
,z - index: 5;
,}
,div {
,-moz-user-select:没有;
,-webkit-user-select:没有;
,用户选择:没有;
,}
,& lt;/style>
& lt;/head>
& lt; body>
,& lt; div id=皊lider-box"比;
,& lt; span id=皊lider"祝辞> & lt;/span>
,& lt; span id=皊lider-text"在滑动解锁& lt;/span>
,& lt; span id=皊lider-bg"祝辞& lt;/span>
,& lt; span id=皊lider-Emerge"祝辞& lt;/span>
,& lt; span id=皊top-go"祝辞∨& lt;/span>
,& lt;/div>
& lt;/body>
,& lt; script 类型=拔谋?javascript"比;
,var sliderel={
美元才能:函数(选择){
return 才能;. getelementbyid(选择)
,,},
,getEvent:函数(e) {
var 才能;e=e | |, window.event
return 才能;e;
},
,stopBubble:函数(e) {
var 才能;e =this.getEvent (e)
如果才能(typeof e.preventDefault !=,“undefined") {
e.preventDefault才能();
}{其他才能
时间=e.returnValue 才能;假;
,,}
,}
},
,Elemt={
,国旗:假的,
,nowMoseX: 0,
美元,mx: sliderel。(“slider-box"),
美元,sd: sliderel。(“slider"),
美元,圣:sliderel。(“slider-text"),
美元,某人:sliderel。(“slider-bg"),
美元,se: sliderel。(“slider-Emerge"),
美元,sg: sliderel。(“stop-go"),
,}
Elemt.sd.onmousedown=函数(e){大敌;;
var 才能;e =sliderel.getEvent (e)
sliderel.stopBubble才能(e);
,Elemt.flag=true
nowMoseX才能=e.clientX-Elemt.sd.offsetLeft;
,}
,//滑块最大移动的距离
,maxMove=Elemt.mx.offsetWidth -Elemt.sd.offsetWidth;
,//鼠标移动的时候是否成功
,Elemt.mx.onmousemove=function (e) {
var 才能;e =sliderel.getEvent (e)
如果才能(Elemt.flag) {
var 才能moveX=e.clientX-nowMoseX;
var 才能oElemLeft=Elemt.sd.offsetLeft;//判断滑块移动的范围,,
如果才能(oElemLeft<0){,//判断滑块是否超出限制位置
moveX才能=0;
,Elemt.flag=false
}才能else 如果(oElemLeft> maxMove) {
moveX才能=maxMove;
Elemt.sg.style.display才能=癰lock";
Elemt.sd.style.display才能=皀one"
Elemt.sb.style.width才能=300 +“px"
Elemt.st.innerHTML才能=盎晒Α?
Elemt.st.style.color才能=? fff"
,,}
,,}
Elemt.sd.style.left=moveX +才能“px",
Elemt.sb.style.width才能=oElemLeft + 20 +“px";
,}
,//当鼠抬起判断是否滑动成功
,Elemt.mx.onmouseup=function (e) {
var 才能;e =sliderel.getEvent (e)
,Elemt.flag=false
如果才能(Elemt.sd.offsetLeft
小编给大家分享一下如何使用javascript实现滑动解锁功能,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
<>强效果图:
<强>代码如下:
