欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript拖拽應(yīng)用實(shí)例（二）

 更新時(shí)間：2016年03月25日 14:20:33   作者：凌云之翼  
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實(shí)例，拖拽條拖到底，驗(yàn)證碼顯示出來(lái)，感興趣的小伙伴們可以參考一下

經(jīng)常在網(wǎng)站別人的網(wǎng)站的注冊(cè)頁(yè)中看到一個(gè)拖拽驗(yàn)證的效果，就是它的驗(yàn)證碼剛開(kāi)始不出來(lái)，而是有一個(gè)拖拽的條，你必須將這個(gè)拖拽條拖到底，驗(yàn)證碼才出來(lái)，說(shuō)了感覺(jué)跟沒(méi)說(shuō)一樣，你還是不理解，好吧，我給個(gè)圖你看看：

這個(gè)是在萬(wàn)網(wǎng)的注冊(cè)頁(yè)中所截的圖，大概的效果就是，當(dāng)拖動(dòng)那個(gè)拖拽框時(shí)，如果拖拽框沒(méi)有拖到最右邊，則拖拽框會(huì)移動(dòng)到初始位置，如果拖動(dòng)到最右邊，則拖拽框顯示為對(duì)勾，中間的文字也變了，但是我試了一下，他的驗(yàn)證碼的框沒(méi)有出來(lái)，不知道是改了還是怎么的，我沒(méi)有繼續(xù)點(diǎn)擊確定往下進(jìn)行，那不是我們要講的重點(diǎn)，我就在他的代碼中把那個(gè)驗(yàn)證的框手動(dòng)顯示出來(lái)了，也就是gif最后的幾幀中的畫(huà)面，這樣講，應(yīng)該懂我要講的是什么意思吧，沒(méi)錯(cuò)，我們今天要實(shí)現(xiàn)的就是這個(gè)拖拽驗(yàn)證的效果，拖拽后的驗(yàn)證框我們就不做了

看看我們做的效果：

gif圖感覺(jué)有點(diǎn)卡，實(shí)際效果要流暢一些，看看效果基本上無(wú)差吧，具體實(shí)現(xiàn)原理我就不講了，如果還不知道怎么實(shí)現(xiàn)的同學(xué)，可以出門(mén)往左轉(zhuǎn)，找到我寫(xiě)的一篇 ：javascript實(shí)現(xiàn)PC網(wǎng)頁(yè)里的拖拽效果 ，里面寫(xiě)的比較清楚，掌握拖拽的基本原理，實(shí)現(xiàn)這樣的效果

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

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">請(qǐng)按住滑塊，拖動(dòng)到最右邊</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;
        
        //非標(biāo)準(zhǔn)設(shè)置全局捕獲(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;
          //左側(cè)
          if(left <= 0){
            left = 0;
          }else if(left >= pWidth - oWidth){//右側(cè)
            left = pWidth - oWidth;
            obj.style.background = "#fff url(images/yes.png) no-repeat center center";
            aSpan.innerHTML = "驗(yàn)證通過(guò)"; //這里應(yīng)該有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();
          //非標(biāo)準(zhǔn)釋放全局捕獲(IE)
          if(obj.releaseCapture){
            obj.releaseCapture()  
          };

        };
        return false;
      };  
    }  
    //這里是一個(gè)運(yùn)動(dòng)函數(shù)
    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樣式函數(shù)
    function getStyle(obj,attr){
      if(obj.currentStyle){
        return obj.currentStyle[attr];  
      }else{
        return getComputedStyle(obj,false)[attr];
      }
    }

  }

參數(shù)說(shuō)明：

這里給了5個(gè)參數(shù)，obj,parentNode,bgObj,oTxt,endFn

obj：表示拖拽對(duì)象

parentNode：表示拖拽對(duì)象活動(dòng)區(qū)域，一般設(shè)為父級(jí)

bgObj：表示拖拽時(shí)的背景顏色變化的對(duì)象

oTxt：表示文本變化對(duì)象

endFn：返回函數(shù)，非必填

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論