导航

JavaScript 图片拖动 放大 缩小

Posted on 2009-06-26 17:20  Phil Wang  阅读(1016)  评论(0)  编辑  收藏  举报
这几天，项目完了，没有工作，闲的无聊，自己随便看了点javaxcript,
既然搜到了，就把它保存下来，说不定什麽时候就能用上。

<html>    
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片特效</title>

<style type="text/css">
<!--
.dragme{position:relative;cursor:move;}
-->
</style>

<script language="JavaScript">
    // 缩放图片
   function imgToSize(oBool) {
     var oImg = document.all('oImg');
     oImg.style.zoom = parseInt(oImg.style.zoom) + (oBool ? 2 : -2) + '%';
   }

   // 旋转图片
   var oArcSize = 1;
   function imgRoll() {
     var oImg = document.all('oImg');
     oImg.style.filter = 'Progid:DXImageTransform.Microsoft.BasicImage(Rotation='+ oArcSize +')';
     oArcSize += 1;
     oArcSize = oArcSize==4 ? 0 : oArcSize ;
   }

   // 拖动图片 
   var ie = document.all;
   
   var nn6 = document.getElementById && !document.all;
   
   var isdrag = false;
   
   var x, y;
   
   var dobj;
   
   function movemouse(e){
   
       if (isdrag) {
       
           dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
           
           dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
           
           return false;
           
       }
       
   }
   
   function selectmouse(e){
   
       var fobj = nn6 ? e.target : event.srcElement;
       
       var topelement = nn6 ? "HTML" : "BODY";
       
       while (fobj.tagName != topelement && fobj.className != "dragme") {
       
           fobj = nn6 ? fobj.parentNode : fobj.parentElement;
           
       }
       
       if (fobj.className == "dragme") {
       
           isdrag = true;
           
           dobj = fobj;
           
           tx = parseInt(dobj.style.left + 0);
           
           ty = parseInt(dobj.style.top + 0);
           
           x = nn6 ? e.clientX : event.clientX;
           
           y = nn6 ? e.clientY : event.clientY;
           
           document.onmousemove = movemouse;
           
           return false;
           
       }
       
   }
   
   document.onmousedown = selectmouse;
   
   document.onmouseup = new Function("isdrag=false");
   
</script>
</head>

<body>
    <img id="oImg" src="pig.gif" style="position:relative; zoom:100%;" class = "dragme" ><br><br>
      <input type="button" value="放大" onclick="imgToSize(50);">
      <input type="button" value="缩小" onclick="imgToSize(0);">
      <input type="button" value="旋转" onclick="imgRoll();">
</body>
</html>