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

最新推荐文章于 2022-06-28 17:30:08 发布

依水如风

最新推荐文章于 2022-06-28 17:30:08 发布

阅读量3.8k

点赞数

分类专栏： javascript 文章标签： javascript function button input div

本文链接：https://blog.csdn.net/dcju002/article/details/3174038

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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;" οnmοusedοwn="mStart();" οnmοuseup="mEnd();"><br><br>
      <input type="button" value="放大" οnclick="imgToSize(50);">
      <input type="button" value="缩小" οnclick="imgToSize(0);">
      <input type="button" value="旋转" οnclick="imgRoll();">
      <input type="button" value="水平翻转" οnclick="imgReverse('H');">
      <input type="button" value="垂直翻转" οnclick="imgReverse('V');">
   </div>
</body>
</html>