zoukankan html css js c++ java

html5 图片拖动

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>HTML5 drag image in page - cheungmine</title>  
  <style rel="stylesheet" type="text/css" >  
    #_outerDiv{  
      height:600px;  
      width:100%;  
      border:1px solid black;  
      position:relative;  
      overflow:hidden;  
    }  
  </style>  
  <script type="text/javascript">  
    function getElem (id) {  
      return document.getElementById(id);  
    }  
  
    function trimPX (_px) {  
      if(_px==null || _px=="")  
        return 0;  
      return parseInt(_px.substr(0, _px.lastIndexOf("px")));  
    }  
  
    function hitInRect (hitX, hitY, rcLeft, rcTop, rcWidth, rcHeight) {  
      return (hitX>=rcLeft && hitX<rcLeft+rcWidth && hitY>=rcTop && hitY<rcTop+rcHeight);  
    }  
  
    function outerDiv () {  
      return getElem("_outerDiv");  
    }  
  
    function imageDiv () {  
      return getElem("_imageDiv");  
    }  
  
    var dragging = false;  
    var startTop = 0; // top is a Key Word in Chrome and Opera  
    var startLeft = 0;  
    var dragPosY = 0;  
    var dragPosX = 0;  
  
    window.addEventListener("load", initPage, false);  
  
    function initPage () {  
      outerDiv().addEventListener("mousedown", // start moving image  
        function (event) {  
          startTop = trimPX(imageDiv().style.top);  
          startLeft = trimPX(imageDiv().style.left);  
          var width = trimPX(imageDiv().style.width);  
          var height = trimPX(imageDiv().style.height);  
  
          if (hitInRect(event.clientX, event.clientY, startLeft, startTop, width, height)) {  
            dragging = true;  
            dragPosX = event.clientX;  
            dragPosY = event.clientY;  
            event.preventDefault(); // disable default behavior of browser  
          }  
        },  
        false  
      );  
  
      outerDiv().addEventListener("mousemove", // moving image  
        function (event) {  
          if (dragging){  
            imageDiv().style.cursor="pointer";  
            imageDiv().style.top = parseInt(startTop)+(event.clientY - dragPosY) + "px";  
            imageDiv().style.left = parseInt(startLeft)+(event.clientX - dragPosX) + "px";  
          }  
          event.preventDefault();  
        },  
        false  
      );  
  
      outerDiv().addEventListener("mouseup", // stop moving image  
        function (event) {  
          dragging = false;  
          imageDiv().style.cursor="default";            
          event.preventDefault();  
        },  
        false  
      );  
    }  
  </script>  
</head>  
<body>  
  <div id="_outerDiv">  
    <div id="_imageDiv" style="z-index:0; position:relative; top:0px; left:0px; 200px; height:150px;">  
        <img id="_imageObj" src="http://avatar.csdn.net/E/3/5/1_cheungmine.jpg"></img>  
    </div>  
  </div>  
</body>  
</html>

查看全文

相关阅读:
Java学习：冒泡排序和选择排序
 Java学习：多态
 Java学习：抽象类与接口
 Java学习:继承
 Java学习：标准类
 Java学习：方法简介
 传参的本质
 new 关键字做的事
 一个引用类型的对象占多大堆空间
 栈中空间大小

原文地址：https://www.cnblogs.com/nishilunhui/p/2822593.html