快捷導(dǎo)航

javascript實現(xiàn)滑動解鎖功能

更新時間：2017年03月22日 08:49:17 作者：DarkNight

本篇文章主要介紹了javascript實現(xiàn)滑動解鎖功能的方法實例，具有很好的參考價值。下面跟著小編一起來看下吧

效果圖：

代碼如下：

<!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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: