<html> <head>     <title>图片拖动,放大,缩小,转向</title>

<script type="text/javascript">      /*滚轮事件*/     var scrollFunc=function(e) {         e=e || window.event;         if(e.wheelDelta)         {           if(e.wheelDelta > 0) imgToSize(0);//缩小图片           else imgToSize(1);//放大图片         }         else         {           if(e.detail < 0) imgToSize(1);//放大图片           else imgToSize(0);//缩小图片         }     }     if(document.addEventListener){document.addEventListener('DOMMouseScroll',scrollFunc,false);}     window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari

function realSize(){         var oImg = document.all('oImg');          var newImg = new Image();         newImg.src = oImg.src;         oImg.style.height = newImg.height+"px";         oImg.style.width = newImg.width+"px";     }

// 缩放图片     function imgToSize(oBool) {       var oImg = document.all('oImg');       oImg.style.zoom = parseInt(oImg.style.zoom) + (oBool ? 5 : -5) + '%';     }       // 旋转图片      var rotateRight = 1;//右转     var rotateLeft = 3;//左转     function imgRoll(direction) {          var oImg = document.all('oImg');         if(direction == "left") {             oImg.style.filter = 'Progid:DXImageTransform.Microsoft.BasicImage(Rotation='+ rotateLeft +')';             rotateLeft -= 1;              rotateLeft = rotateLeft== 0 ? 4 : rotateLeft ;         }else{             oImg.style.filter = 'Progid:DXImageTransform.Microsoft.BasicImage(Rotation='+ rotateRight +')';             rotateRight += 1;              rotateRight = rotateRight==4 ? 0 : rotateRight ;         }     }       // 翻转图片     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>     <table>         <tr>             <td>                 <div style="position: relative; z-index: 1000;">                     <input type="button" value="放大" onclick="imgToSize(1);">                     <input type="button" value="缩小" onclick="imgToSize(0);">                     <input type="button" value="原大小" onclick="realSize();">                     <input type="button" value="左旋转" onclick="imgRoll('left');">                     <input type="button" value="右旋转" onclick="imgRoll('right');">                     <input type="button" value="水平翻转" onclick="imgReverse('H');">                     <input type="button" value="垂直翻转" onclick="imgReverse('V');">                 </div>             </td>         </tr>         <tr>             <td>                 <div align="center">                     <img id="oImg" src="data:images/save.jpg" style="position: relative; zoom: 100%; cursor: move;"                         onmousedown="mStart();" onmouseup="mEnd();">                 </div>             </td>         </tr>     </table> </body> </html>

JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效的更多相关文章

  1. js 控制图片大小核心讲解

    控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...

  2. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  3. js控制图片自动缩放，实现铺满盒子，不变形，完全局中

    此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...

  4. js控制图片放大缩小的简易版

    js代码: function bb_img_onmousewheel(e, o) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom += eve ...

  5. spin.js无图片实现loading进度条,支持但非依赖jquery

    特点: 1.无图片,无外部CSS 2.无依赖(支持jQuery,但非必须) 3.高度可配置 4.分辨率无关 5.旧版本IE不支持时,采用VML支持 6.使用关键帧动画,采用setTimeout() 7 ...

  6. Android -- ImageView(控制图片的大小以及旋转的角度)

    1. 

  7. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  8. js控制图片缩放、水平和垂直方向居中对齐

    已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...

  9. JS控制图片显示的大小（图片等比例缩放）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. UltraEdit中使用正则表达式

    正则表达式 (UltraEdit Syntax): % 匹配行首 - 表明要搜索的字符串一定在行首. $ 匹配行尾 - 表明要搜索的字符串一定在行尾 ? 匹配除换行符外的任一单个字符. * 匹配任意个 ...

  2. 第十七章 调试及安全性(In .net4.5) 之 程序诊断

    1. 概述 生产环境中的程序,也是不能保证没有问题的.为了能方便的找出问题,.net提供了一些特性来进行程序诊断. 这些特性包括:logging.tracing .程序性能分析(profiling) ...

  3. Python 2.7的安装（64位win10）

    Python 2.7.12 下载地址:https://www.python.org/downloads/release/python-2712/ 安装路径D:\Program Files\Python ...

  4. EMVTag系列9《卡片管理数据》

    Ø  5F30    服务码 F: n 3 T: 5F30 L: 2 -O(可选):可选数据元 按GB/T 17552标准,卡片中的服务码(5F30) 的值,要和二磁道等效数据57中的服务码的值完全一 ...

  5. Datastage数据装载报错：Consumed more than 1000000 bytes looking for record delimiter

    使用Datastage装载数据时报错如下图: 使用ds进行数据传输时,出现上述问题,最终找到了问题的原因: 我所使用的数据文件比较大,上传到服务器的时候传了80%就出现服务器存储空间不够,我删除以前的 ...

  6. Knockout.Js学习目录

    1.Knockout.Js(简介) 2.Knockout.Js(监控属性Observables) 3.Knockout.Js(属性绑定) 4.Knockout.Js(事件绑定) 5.Knockout. ...

  7. netstat用法

    netstat - 显示网络连接,路由表,接口状态,伪装连接,网络链路信息和组播成员组. 总 netstat [address_family_options] [--tcp|-t] [--udp|-u ...

  8. FPGA中如何实现除法？

    摘自:<xilinx FPGA 开发实用教程> 1)被除数重复的减去除数,直到检测到余数小于除数为止,优点:对于除数与被除数相差较小的情况下合适 2)通过如下图片方式实现+状态机.优点:挺 ...

  9. ioctl和unlock_ioctl的区别

    今天调一个程序调了半天,发现应用程序的ioctl的cmd参数传送到驱动程序的ioctl发生改变.而根据<linux设备驱动>这个cmd应该是不变的.因为在kernel 2.6.36 中已经 ...

  10. Graceful degradation versus progressive enhancement

    http://ued.taobao.org/blog/2008/10/understanding-progressiveen-hancement-chs-translation/ http://www ...