<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. 旋转转盘选择Menu--第三方开源--CircleMenu

    CircleMenu在github上的项目主页是:https://github.com/zhangphil/Android-CircleMenu CircleMenu用法简单,JAVA代码: pack ...

  2. paypal api 相关资料

    https://developer.paypal.com/ https://developer.paypal.com/docs/classic/api/merchant/GetBalance_API_ ...

  3. 【转载】Android通过ksoap2调用.net(c#)的webservice

    转载自:http://www.cnblogs.com/badtree/articles/3242842.html ■下载 ksoap2-android 包 去http://code.google.co ...

  4. 淘宝：OceanBase分布式系统负载均衡案例分享

    Heroku因"随机调度+Rails单线程处理导致延迟增加的负载均衡失败"的案例之后,我们在思考:在负载均衡测试时发现问题并妥善解决的成功经验有没有?于是,挖掘出"淘宝在 ...

  5. 在mac上安装pydev for eclipse时，在eclipse的Preferences中无法显示出来的解决方法

    参考http://pydev.org/manual_101_install.html 中的说明,该插件依赖java7,在我安装eclipse之前并没有安装jdk,打开eclipse之后,自动安装了一个 ...

  6. python 校招信息爬虫程序

    发现一个爬虫程序,正在学习中: https://github.com/lizherui/spider_python

  7. [转]判断程序是否运行在 Windows x64 系统下

    以下功能代码判断是否运行在 Windows x64 下.本例使用 Windows API 函数 IsWow64Process,具体请参考MSDN文档:http://msdn.microsoft.com ...

  8. Android SharedPreferences使用以及原理详解

    SharedPreferences的使用非常简单,能够轻松的存放数据和读取数据.SharedPreferences只能保存简单类型的数据,例如,String.int等.一般会将复杂类型的数据转换成Ba ...

  9. Xcode7 beta 网络请求报错：The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.

    Xcode7 beta 网络请求报错:The resource could not be loaded because the App Transport Xcode7 beta 网络请求报错:The ...

  10. scjp考试准备 - 1 - 循环控制

    判断如下代码最后的执行结果. public class Breaker{ static String o = ""; public static void main(String[ ...