suchen

Heim >Web-Frontend >js-Tutorial >JavaScript implementiert ziehbare Layer-Div-Instance_Javascript-Fähigkeiten

JavaScript implementiert ziehbare Layer-Div-Instance_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:47:031122Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie man eine ziehbare Ebene Div mit JavaScript implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein perfekter JS-Drag-Effekt. Der JavaScript-Drag-Layer-Code wurde mehrfach optimiert und korrigiert. Die Methode zum Kopieren von Knoten ist gleichzeitig für JS-Enthusiasten erlernbar Für das Ziehen von Elementen wurde das Problem hinzugefügt, dass das ondblclick-Ereignis mit mehreren Browsern kompatibel ist und durch Kopieren des Codes ausgeführt und verwendet werden kann.

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;} .div{ width:100px; height:100px; position:absolute;left:100px; top:100px; background:#ccc;}
</style>
</head>
<body>
  <div class="div">
  </div>
  <script type="text/javascript">
   var div = document.getElementsByTagName('div')[0];
   var zIndex = 6;
   drag(div);
   div.ondblclick = function() {
    alert("ok");
   };
   function drag(oDrag) {
    var disX = dixY = 0;
    oDrag.onmousedown = function(event) {
     var event = event || window.event;
     disX = event.clientX - this.offsetLeft;
     disY = event.clientY - this.offsetTop;
     var oTemp = this.cloneNode(true);
     document.body.appendChild(oTemp);
     document.onmousemove = function(event) {
      var event = event || window.event;
      var iL = event.clientX - disX;
      var iT = event.clientY - disY;
      var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
      var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
      iL <= 0 && (iL = 0);
      iT <= 0 && (iT = 0);
      iL >= maxL && (iL = maxL);
      iT >= maxT && (iT = maxT);
      oTemp.style.zIndex = zIndex++;
      oTemp.style.opacity = "0.5";
      oTemp.style.filter = "alpha(opacity=50)";
      oTemp.style.left = iL + "px";
      oTemp.style.top = iT + "px";
      return false;
     };
     document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
      oDrag.style.opacity = oTemp.style.opacity;
      var arr = {
       left: oTemp.offsetLeft,
       top: oTemp.offsetTop
      };
      oDrag.style.zIndex = oTemp.style.zIndex;
      oAnimate(oDrag, arr, 300,
      function() {
       document.body.removeChild(oTemp);
      });
      oDrag.releaseCapture && oDrag.releaseCapture()
     };
     this.setCapture && this.setCapture();
     return false
    }
   }
   function oAnimate(obj, params, time, handler) {
    var node = typeof obj == "string" &#63; $(obj) : obj;
    var _style = node.currentStyle &#63; node.currentStyle: window.getComputedStyle(node, null);
    var handleFlag = true;
    for (var p in params) { (function() {
      var n = p;
      if (n == "left" || n == "top") {
       var _old = parseInt(_style[n]);
       var _new = parseInt(params[n]);
       var _length = 0,
       _tt = 10;
       if (!isNaN(_old)) {
        var count = _old;
        var length = _old <= _new &#63; (_new - _old) : (_old - _new);
        var speed = length / time * _tt;
        var flag = 0;
        var anim = setInterval(function() {
         node.style[n] = count + "px";
         count = _old <= _new &#63; count + speed: count - speed;
         flag += _tt;
         if (flag >= time) {
          node.style[n] = _new + "px";
          clearInterval(anim);
          if (handleFlag) {
           handler();
           handleFlag = false;
          }
         }
        },
        _tt);
       }
      }
     })();
    }
   }
  </script>
 </body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript-Implementierungsbeispiel für mehrspaltige geschlossene und erweiterbare Werbeflächenmenüs effect_javascript skillsNächster Artikel：Javascript-Implementierungsbeispiel für mehrspaltige geschlossene und erweiterbare Werbeflächenmenüs effect_javascript skills

In Verbindung stehende Artikel

Mehr sehen