javascript做图片放大，缩小，旋转

来源：互联网发布：淘宝衣服店怎么进货编辑：程序博客网时间：2024/05/02 02:00

<html>
<head>
<title>图片效果</title>
<meta name="Author" content="51js-zmm">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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 ;
   }

   // 翻转图片
   function imgReverse(arg) {
     var oImg = document.all('oImg');
     oImg.style.filter = 'Flip' + arg;
   }

   // 拖动图片
   var oBoolean = false, oLeftSpace = 0, oTopSpace = 0;
   function mStart() {
      oBoolean = true;
      if (oBoolean) {
         var oImg = document.all('oImg');
         oLeftSpace = window.event.clientX - oImg.style.pixelLeft;
         oTopSpace = window.event.clientY - oImg.style.pixelTop;
      }
   }

   function mEnd() {
      oBoolean = false;
   }

   function document.onmousemove() {
      if (window.event.button==1 && oBoolean) {
         var oImg = document.all('oImg');
         oImg.style.pixelLeft = window.event.clientX - oLeftSpace;
         oImg.style.pixelTop = window.event.clientY - oTopSpace;
         return false;
      }
   }
</script>
</head>
<body>
   <div align="center">
      <img id="oImg" src="317625802.jpg" style="position:relative; zoom:100%; cursor:move;" onmousedown="mStart();" onmouseup="mEnd();"><br><br>
      <input type="button" value="放大" onclick="imgToSize(50);">
      <input type="button" value="缩小" onclick="imgToSize(0);">
      <input type="button" value="旋转" onclick="imgRoll();">
      <input type="button" value="水平翻转" onclick="imgReverse('H');">
      <input type="button" value="垂直翻转" onclick="imgReverse('V');">
   </div>
</body>
</html>