Exemples d'applications de glisser-déposer JavaScript (2)_compétences Javascript

Je vois souvent un effet de vérification par glisser-déposer sur la page d'inscription d'autres sites Web. C'est-à-dire que le code de vérification ne sort pas au début, mais il y a une barre de glisser-déposer. cette barre de glisser jusqu'à la fin. , le code de vérification vient de sortir, c'est comme si je ne l'avais pas dit, tu ne comprends toujours pas, d'accord, laisse-moi te mettre une photo :

Il s'agit d'une photo prise à partir de la page d'inscription de Wanwang. L'effet approximatif est que lorsque vous faites glisser la zone de déplacement, si la zone de déplacement n'est pas déplacée vers l'extrême droite, la zone de déplacement se déplacera vers la position initiale, si. vous le faites glisser vers l'extrême droite, la case de déplacement s'affichera sous forme de coche et le texte au milieu changera également, mais je l'ai essayé et sa boîte de code de vérification n'est pas sortie, je ne sais pas si. il a été modifié ou quelque chose comme ça, je n'ai pas continué à cliquer sur OK pour continuer. Ce n'est pas l'objet de ce dont nous parlons, j'ai affiché manuellement la boîte de vérification dans son code, qui est l'image dans les dernières images du. gif. De cette façon, vous devriez comprendre ce que je veux. Que voulez-vous dire ? Oui, ce que nous voulons obtenir aujourd'hui, c'est l'effet de la vérification par glisser-déposer. Nous ne ferons pas la case de vérification après le glisser

.

Regardez les résultats que nous avons obtenus :

L'image gif semble un peu bloquée. L'effet réel devrait être plus fluide. Je verrai que l'effet est fondamentalement le même. Je n'entrerai pas dans les principes spécifiques de mise en œuvre. , vous pouvez sortir et tourner à gauche pour trouver Un article que j'ai écrit : Javascript réalise l'effet glisser-déposer dans les pages Web PC L'écriture est relativement claire. et laissez tomber pour obtenir de tels effets

C'est un jeu d'enfant, haha, alors je publierai le code pour que tout le monde puisse le voir, à titre de référence uniquement :

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];
      }
    }

  }
 

Description du paramètre :

Cinq paramètres sont donnés ici, obj, parentNode, bgObj, oTxt, endFn

obj : représente l'objet glisser

parentNode : représente la zone active de l'objet glisser, généralement défini comme parent

bgObj : Un objet qui représente le changement de couleur d'arrière-plan lors du glissement

oTxt : représente un objet de modification de texte

endFn : fonction de retour, facultatif

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.