`
jxqc_job
  • 浏览: 529 次
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
div拖动、平移 div拖动、平移
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>div鎵樺姩锛屾墦寮€锛屽叧闂晥鏋?/title>
    <style type="text/css">body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:block; color:#547BC9; float:left; text-decoration:none; margin-top:2px; } a.od:link{ background:#EEF1F8; } a.od:visited{ background:#EEF1F8; } a.od:hover{ background:#EEE; } a.od:active{ background:#EEE; } #Canvas{ width:500px; height:200px; background:#EDF1F8; border: 2px solid #849BCA; margin-top:2px; margin-left:2px; float:left; overflow:hidden; position:absolute; left:0px; top:0px; cursor:move; float:left; /*filter:alpha(opacity=50);*/ } .content{ padding:10px; }</style></head>
  
  <body>
    <div id="Canvas" style="display:block;filter:alpha(opacity=100);opacity:1;">
    </div>
    <script type="text/javascript">
	  var prox;
      var proy;
      var proxc;
      var proyc;

      function openx(o, x) {
        /*--鎵撳紑x--*/
        var cx = parseInt(o.style.width);
        if (cx < x)
        {
          o.style.width = (cx + Math.ceil((x - cx) / 5)) + "px";
        }
        else
        {
          clearInterval(prox);
          proy = setInterval(function() {
            openy(o, 200)
          },
          10);
        }
      }

      function openy(o, y) {
        /*--鎵撳紑y--*/
        var cy = parseInt(o.style.height);
        if (cy < y)
        {
          o.style.height = (cy + Math.ceil((y - cy) / 5)) + "px";
        }
        else
        {
          clearInterval(proy);
        }
      }
	  
      function closey(o) {
        /*--鎵撳紑y--*/
        var cy = parseInt(o.style.height);
        if (cy > 0)
        {
          o.style.height = (cy - Math.ceil(cy / 5)) + "px";
        }
        else
        {
          clearInterval(proyc);
          proxc = setInterval(function() {
            closex(o)
          },
          10);
        }
      }

      function closex(o) {
        /*--鎵撳紑x--*/
        var cx = parseInt(o.style.width);
        if (cx > 0)
        {
          o.style.width = (cx - Math.ceil(cx / 5)) + "px";
        }
        else
        {
          clearInterval(proxc);
          o.style.display = "none";
        }
      }

      /*-------------------------榧犳爣鎷栧姩---------------------*/
      var od = document.getElementById("Canvas");
      var dx, dy, mx, my, mouseD;
      var odrag;
      var isIE = document.all ? true: false;

      document.onmousedown = function(e) {
        var e = e ? e: event;
        if (e.button == (document.all ? 1 : 0))
        {
          mouseD = true;
        }
      }

      document.onmouseup = function() {
        mouseD = false;
        odrag = "";
        if (isIE){
          od.releaseCapture();
          od.filters.alpha.opacity = 100;
        }else{
          window.releaseEvents(od.MOUSEMOVE);
          od.style.opacity = 1;
        }
      }

      //function readyMove(e){ 
      od.onmousedown = function(e) {
        odrag = this;
        var e = e ? e: event;
        if (e.button == (document.all ? 1 : 0))
        {
          mx = e.clientX;
          my = e.clientY;
          od.style.left = od.offsetLeft + "px";
          od.style.top = od.offsetTop + "px";
          if (isIE)
          {
            od.setCapture();
            od.filters.alpha.opacity = 50;
          }
          else
          {
            window.captureEvents(Event.MOUSEMOVE);
            od.style.opacity = 0.5;
          }
          //alert(mx); 
          //alert(my); 
        }
      }

      document.onmousemove = function(e) {
        var e = e ? e: event;
        //alert(mrx); 
        //alert(e.button); 
        if (mouseD == true && odrag)
        {
          var mrx = e.clientX - mx;
          var mry = e.clientY - my;
          od.style.left = parseInt(od.style.left) + mrx + "px";
          od.style.top = parseInt(od.style.top) + mry + "px";
          mx = e.clientX;
          my = e.clientY;
        }
      }
	  </script>
	  
  </body>
</html>
Global site tag (gtag.js) - Google Analytics