Beispiele für JavaScript-Drag-and-Drop-Anwendungen (2)_Javascript-Kenntnisse

Ich sehe oft einen Drag-and-Drop-Verifizierungseffekt auf der Registrierungsseite anderer Websites. Das heißt, der Bestätigungscode wird nicht am Anfang angezeigt, sondern es gibt eine Drag-and-Drop-Leiste Ziehen Sie diese Leiste bis zum Ende, der Bestätigungscode kam gerade heraus und es fühlt sich an, als hätte ich ihn nicht gesagt, aber Sie verstehen es immer noch nicht, okay, lassen Sie mich Ihnen ein Bild geben:

Dies ist ein Bild, das von der Registrierungsseite von Wanwang aufgenommen wurde. Der ungefähre Effekt besteht darin, dass das Drag-Feld beim Ziehen nicht ganz nach rechts verschoben wird, wenn Wenn Sie es ganz nach rechts ziehen, wird das Ziehfeld als Häkchen angezeigt und der Text in der Mitte ändert sich ebenfalls, aber ich habe es versucht und sein Bestätigungscode-Feld wurde nicht angezeigt Es wurde geändert oder so, ich habe nicht auf „Weiter“ geklickt, um fortzufahren. Das ist nicht der Schwerpunkt dessen, worüber wir sprechen. Ich habe das Bestätigungsfeld in seinem Code angezeigt, bei dem es sich um das Bild in den letzten Frames handelt gif. Auf diese Weise sollten Sie verstehen, was ich will. Ja, was wir heute erreichen wollen, ist der Effekt der Drag-and-Drop-Überprüfung. Wir werden das Überprüfungsfeld nach dem Ziehen nicht durchführen

Sehen Sie sich die Ergebnisse an, die wir erzielt haben:

Das GIF-Bild fühlt sich etwas fester an. Ich werde nicht auf die spezifischen Implementierungsprinzipien eingehen , Sie können nach links gehen und einen Artikel finden, den ich geschrieben habe:

Javascript realisiert den Drag-and-Drop-Effekt in PC-Webseiten Das Schreiben ist relativ klar und fallen lassen, um solche Effekte zu erzielen

Das ist ein Kinderspiel, haha, dann poste ich den Code, damit jeder ihn sehen kann, nur als Referenz:

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 &#63; 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];
      }
    }

  }
 

Parameterbeschreibung:

Hier werden fünf Parameter angegeben: obj, parentNode, bgObj, oTxt, endFn

obj: stellt das Drag-Objekt dar

parentNode: Stellt den aktiven Bereich des Drag-Objekts dar und wird normalerweise als übergeordnetes Element

festgelegt

bgObj: Ein Objekt, das die Änderung der Hintergrundfarbe beim Ziehen darstellt

oTxt: Stellt ein Textänderungsobjekt dar

endFn: Rückgabefunktion, optional

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.