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

最新推荐文章于 2025-08-13 21:05:35 发布

原创最新推荐文章于 2025-08-13 21:05:35 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #button #input #div

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用HTML与JavaScript实现的图片操作案例，包括图片的缩放、旋转、翻转及拖动等功能。通过简单的按钮点击即可完成对图片的多种操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>