效果圖：
代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; padding: 0; } #slider-box { width: 300px; height: 50px; border-radius: 4px; background: #ccc; margin: 250px auto; position: relative; } #slider { width: 48px; height: 48px; border: 1px solid #eee; text-align: center; line-height: 48px; display: inline-block; background: #fff; border-radius: 4px; cursor: move; position: absolute; left: 0; z-index: 5; } #slider-text { text-align: center; line-height: 50px; display: inline-block; width: 100%; height: 50px; font-family: "微軟雅黑"; position: absolute; left: 0; z-index: 4; } #slider-bg { width: 0; height: 48px; background: green; position: absolute; z-index: 3; border-radius: 4px; } #slider-Emerge { width: 100px; background:; height: 50px; position: absolute; } #stop-go { width: 48px; height: 48px; border: 1px solid #eee; background:#36F; position: absolute; right: -1px; display: none; text-align: center; line-height: 48px; color: #fff; font-family: "微軟雅黑"; border-radius: 4px; z-index: 5; } div{ -moz-user-select:none; -webkit-user-select:none; user-select:none; } </style></head><body> <div id="slider-box"> <span id="slider">＞</span> <span id="slider-text">滑動解鎖</span> <span id="slider-bg"></span> <span id="slider-Emerge"></span> <span id="stop-go">∨</span> </div></body> <script type="text/javascript"> var sliderel={ $: function(selector){ return document.getElementById(selector) }, getEvent:function(e){ var e=e || window.event return e; }, stopBubble:function(e){ var e =this.getEvent(e) if(typeof e.preventDefault != "undefined"){ e.preventDefault(); }else{ e.returnValue = false; } } }, Elemt={ flag:false, nowMoseX: 0, mx:sliderel.$("slider-box"), sd:sliderel.$("slider"), st:sliderel.$("slider-text"), sb:sliderel.$("slider-bg"), se:sliderel.$("slider-Emerge"), sg:sliderel.$("stop-go"), } Elemt.sd.onmousedown=function(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) if(Elemt.flag){ var moveX=e.clientX-nowMoseX; var oElemLeft=Elemt.sd.offsetLeft;//判斷滑塊移動的范圍 if(oElemLeft<0){ //判斷滑塊是否超出限制位置 moveX=0; Elemt.flag=false }else if(oElemLeft>maxMove){ moveX=maxMove; Elemt.sg.style.display="block"; Elemt.sd.style.display="none" 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 if(Elemt.sd.offsetLeft<maxMove){ speed=Math.ceil(Elemt.sd.offsetLeft/40); time=setInterval(function(){ if(Elemt.sd.offsetLeft>=0){ Elemt.sd.style.left=Elemt.sd.offsetLeft-speed+"px"; Elemt.sb.style.width=Elemt.sb.offsetWidth-speed+"px"; }else{ clearInterval(time); return false; } },10) } } //當鼠離開是否滑動成功 Elemt.sd.onmouseout=function(e){ sliderel.stopBubble(e); Elemt.flag=false; if( Elemt.sd.offsetLeft<maxMove){ speed=Math.ceil(Elemt.sd.offsetLeft/40); time=setInterval(function(){ if(Elemt.sd.offsetLeft>=0){ Elemt.sd.style.left=Elemt.sd.offsetLeft-speed+"px"; Elemt.sb.style.width=Elemt.sb.offsetWidth-speed+"px"; }else{ clearInterval(time); return false; } },10); } } </script></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
