<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. php或js判断网站访问者来自手机或者pc

    php或js判断网站访问者来自手机或者pc机 2013年9月26日,在弄wtuonline的时候为了区分用户是来自手机版浏览器还是pc,针对不同平台选择不同的网站版本,最终总结如下:         ...

  2. VPN连接失败

    连接VPN是总提示 本来我以为是VPN服务器的问题,可是别人就能连接成功,所以只能是我自己机子的问题.后来检查了一下连接属性,终于发现了问题: 这里“允许使用这些协议”应该是处于选中状态,而我的属性里 ...

  3. U6会计科目导入致对账不平

    一个客户,用的是U6版本,想将己使用的账套的科目导入新建的账套中,本想用用友本身自带的总账工具导入,发现导不了.没办法,只能打开数据库,手工导入. 月末结账时,发现对账不平.问题是余额表与明细不平,大 ...

  4. 线性结构CT 02-线性结构1 一元多项式的乘法与加法运算

    设计函数分别求两个一元多项式的乘积与和. 输入格式: 输入分2行,每行分别先给出多项式非零项的个数,再以指数递降方式输入一个多项式非零项系数和指数(绝对值均为不超过1000的整数).数字间以空格分隔. ...

  5. Castle 集锦

    Castle Windsor http://www.cnblogs.com/RicCC/archive/2010/03/30/castle-windsor-ioc-di.html 官方配置说明(反正我 ...

  6. python 遍历文件夹

    import os import os.path rootdir = “d:\data” # 指明被遍历的文件夹 for parent,dirnames,filenames in os.walk(ro ...

  7. spring事物的七种事物传播属性行为及五种隔离级别

    首先,说说什么事务(Transaction). 事务,就是一组操作数据库的动作集合.事务是现代数据库理论中的核心概念之一.如果一组处理步骤或者全部发生或者一步也不执行,我们称该组处理步骤为一个事务.当 ...

  8. Excle中LOOKUP经典用法

    在Excle中我们经常会遇到需要求根据某个区间的判断然后获取到对应的结果,下面是一个具体的实现例子: 例如: 现在需要实现,当输入0到25以内的任何数字时,会自动获取相应的英文字母 =IFERROR( ...

  9. c语言中通过指针将数值赋值到制定内存地址

    1.一种直观的方法 假设现在需要往内存0x12ff7c地址上存入一个整型数0x100.我们怎么才能做到呢? 我们知道可以通过一个指针向其指向的内存地址写入数据,那么这里的内存地址0x12ff7c其本质 ...

  10. hdu 4006/AvlTree

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4006 这道题以前用c语言写的Avltree水过了.. 现在接触了c++重写一遍... 由于没有删除操作 ...