javascript拖拽應用實例（二）

2019-11-20 10:20:43

字體：大中小

來源：轉載

供稿：網友

經常在網站別人的網站的注冊頁中看到一個拖拽驗證的效果，就是它的驗證碼剛開始不出來，而是有一個拖拽的條，你必須將這個拖拽條拖到底，驗證碼才出來，說了感覺跟沒說一樣，你還是不理解，好吧，我給個圖你看看：

這個是在萬網的注冊頁中所截的圖，大概的效果就是，當拖動那個拖拽框時，如果拖拽框沒有拖到最右邊，則拖拽框會移動到初始位置，如果拖動到最右邊，則拖拽框顯示為對勾，中間的文字也變了，但是我試了一下，他的驗證碼的框沒有出來，不知道是改了還是怎么的，我沒有繼續點擊確定往下進行，那不是我們要講的重點，我就在他的代碼中把那個驗證的框手動顯示出來了，也就是gif最后的幾幀中的畫面，這樣講，應該懂我要講的是什么意思吧，沒錯，我們今天要實現的就是這個拖拽驗證的效果，拖拽后的驗證框我們就不做了

看看我們做的效果：

gif圖感覺有點卡，實際效果要流暢一些，看看效果基本上無差吧，具體實現原理我就不講了，如果還不知道怎么實現的同學，可以出門往左轉，找到我寫的一篇：javascript實現PC網頁里的拖拽效果 ，里面寫的比較清楚，掌握拖拽的基本原理，實現這樣的效果

那就是小菜一碟了，哈哈，那我就把代碼貼出來給大家看看，僅供參考：

css：

#drag_wrap{  width:300px;  height:35px;  position:relative;  background:#e8e8e8;  margin:100px auto;}#drag_bg{  width:0;  height:35px;  background:#7ac23c;  position:absolute;  top:0;  left:0;}#drag_box{  width:40px;  height:33px;  border:1px solid #ccc;  background:#fff url(images/rt.png) no-repeat center center;  position:absolute;  top:0;  left:0;  cursor:move;  z-index:2;}#drag_txt{  width: 100%;  height: 100%;  text-align: center;  position: absolute;  z-index: 1;  background: transparent;  color: #9c9c9c;  line-height: 35px;  font-size: 12px;}#drag_txt span{  cursor: default;  z-index: 0;}#drag_txt .startTxt{  background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  -webkit-animation: slidetounlock 3s infinite;  -webkit-text-size-adjust: none;}@-webkit-keyframes slidetounlock {  0% {    background-position: -200px 0  }  100% {    background-position: 200px 0  }}.yseTxt{  background:none;  color:#fff;}

html：

<div id="drag_wrap">    <div id="drag_bg"></div>    <div id="drag_box"></div>    <div id="drag_txt" ><span class="startTxt">請按住滑塊，拖動到最右邊</span></div>  </div>

JavaScript：

window.onload = function(){    drag("drag_box","drag_wrap","drag_bg","drag_txt");        function drag(obj,parentNode,bgObj,oTxt,endFn){      var obj = document.getElementById(obj);      var parentNode = document.getElementById(parentNode);      var bgObj = document.getElementById(bgObj);      var oTxt = document.getElementById(oTxt);      var aSpan = oTxt.getElementsByTagName("span")[0];      obj.onmousedown = function(ev){        var ev = ev || event;                //非標準設置全局捕獲(IE)        if(obj.setCapture){          obj.setCapture()          };        var disX = ev.clientX - this.offsetLeft,          disY = ev.clientY - this.offsetTop;        var oWidth = obj.offsetWidth,          oHeight = obj.offsetHeight;        var pWidth = parentNode.offsetWidth,          pHeight = parentNode.offsetHeight;              document.onmousemove = function(ev){          var ev = ev || event;                    var left = ev.clientX - disX;          //左側          if(left <= 0){            left = 0;          }else if(left >= pWidth - oWidth){//右側            left = pWidth - oWidth;            obj.style.background = "#fff url(images/yes.png) no-repeat center center";            aSpan.innerHTML = "驗證通過"; //這里應該有ajax操作            aSpan.className = 'yseTxt';          };          obj.style.left = bgObj.style.width = left + 'px';                      };        document.onmouseup = function(ev){          var ev = ev || event;          document.onmousemove = document.onmouseup = null;          //磁性吸附          var L = ev.clientX - disX;          if(L < pWidth - oWidth){            startMove(obj,{left:0});            startMove(bgObj,{width:0});            };          endFn && endFn();          //非標準釋放全局捕獲(IE)          if(obj.releaseCapture){            obj.releaseCapture()            };        };        return false;      };      }      //這里是一個運動函數    function startMove(obj,json,endFn){      clearInterval(obj.timer);      obj.timer = setInterval(function(){        var bBtn = true;        for(var attr in json){          var iCur = 0;          if(attr == 'opacity'){            if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){              iCur = Math.round(parseFloat(getStyle(obj,attr))*100);            }else{              iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;            }            }          else{            iCur = parseInt(getStyle(obj,attr)) || 0;          }          var iSpeed = (json[attr] - iCur)/5;          iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);          if(iCur!=json[attr]){            bBtn = false;          }          if(attr == 'opacity'){            obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';            obj.style.opacity = (iCur + iSpeed)/100;            }          else{            obj.style[attr] = iCur + iSpeed + 'px';          }        }        if(bBtn){          clearInterval(obj.timer);          if(endFn){            endFn.call(obj);          }        }      },30);    }    //這里是獲取css樣式函數    function getStyle(obj,attr){      if(obj.currentStyle){        return obj.currentStyle[attr];        }else{        return getComputedStyle(obj,false)[attr];      }    }  }

參數說明：

這里給了5個參數，obj,parentNode,bgObj,oTxt,endFn

obj：表示拖拽對象

parentNode：表示拖拽對象活動區域，一般設為父級

bgObj：表示拖拽時的背景顏色變化的對象

oTxt：表示文本變化對象

endFn：返回函數，非必填

以上就是本文的全部內容，希望對大家的學習有所幫助。

上一篇：jQuery常用的一些技巧匯總

下一篇：幾種經典排序算法的JS實現方法