注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

JS控制图片拖动 放大 缩小 旋转  

2016-09-06 23:26:59|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
  1. <html>  
  2. <head>  
  3. <script Language="javascript">  
  4.    // 缩放图片  
  5.    function imgToSize(oBool) {  
  6.      var oImg = document.all('oImg');  
  7.      oImg.style.zoom = parseInt(oImg.style.zoom) + (oBool ? 2 : -2) + '%';  
  8.    }  
  9.   
  10.    // 旋转图片  
  11.    var oArcSize = 1;  
  12.    function imgRoll() {  
  13.      var oImg = document.all('oImg');  
  14.      oImg.style.filter = 'Progid:DXImageTransform.Microsoft.BasicImage(Rotation='+ oArcSize +')';  
  15.      oArcSize += 1;  
  16.      oArcSize = oArcSize==4 ? 0 : oArcSize ;  
  17.    }  
  18.   
  19.    // 翻转图片  
  20.    function imgReverse(arg) {  
  21.      var oImg = document.all('oImg');  
  22.      oImg.style.filter = 'Flip' + arg;            
  23.    }  
  24.   
  25.    // 拖动图片  
  26.    var oBoolean = falseoLeftSpace = 0oTopSpace = 0;  
  27.    function mStart() {  
  28.       oBoolean = true;  
  29.       if (oBoolean) {  
  30.          var oImg = document.all('oImg');  
  31.          oLeftSpace = window.event.clientX - oImg.style.pixelLeft;  
  32.          oTopSpace = window.event.clientY - oImg.style.pixelTop;  
  33.       }  
  34.    }  
  35.   
  36.    function mEnd() {  
  37.       oBoolean = false;  
  38.    }  
  39.   
  40.    function document.onmousemove() {  
  41.       if (window.event.button==1 && oBoolean) {  
  42.          var oImg = document.all('oImg');  
  43.          oImg.style.pixelLeft = window.event.clientX - oLeftSpace;  
  44.          oImg.style.pixelTop = window.event.clientY - oTopSpace;  
  45.          return false;  
  46.       }  
  47.    }  
  48. </script>  
  49. </head>  
  50. <body>  
  51.    <div align="center">  
  52.       <img id="oImg"  
  53.    src="images/map.jpg" style="position:relative; zoom:100%; cursor:move;" onMouseDown="mStart();" onMouseUp="mEnd();"><br><br>  
  54.    </div>  
  55.    <div style="position:relative; z-index:1000;">  
  56.       <input type="button" value="放大" onClick="imgToSize(1);">  
  57.       <input type="button" value="缩小" onClick="imgToSize(0);">  
  58.       <input type="button" value="旋转" onClick="imgRoll();">  
  59.       <input type="button" value="水平翻转" onClick="imgReverse('H');">   
  60.       <input type="button" value="垂直翻转" onClick="imgReverse('V');">   
  61.    </div>  
  62. </body>  
  63. </html>  
  评论这张
 
阅读(62)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017