<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. 【摘抄】Application.StartupPath和System.Environment.CurrentDirectory的区别

    System.Environment.CurrentDirectory的含义是获取或设置当前工作路径,而Application.StartupPath是获取程序启动路径,表面上看二者没什么区别,但实际 ...

  2. 共享内存shared pool （4）：Library cache 转储文件

    上一篇blog只是从概念上理解Library cache,本篇则是将Library cache从内存中dump出来,看看其结构. 基本命令 ALTER SESSION SET EVENTS 'imme ...

  3. STM32F0xx_ADC采集电压配置详细过程

    前言 关于ADC这一块的功能基本上也算是CortexM芯片的标配了.ST的每一块芯片都有这个功能,只是说因型号不同,通道数.位数等有所不同.STM8的芯片大多数都是10的,也就是说分辨率可达到:参考电 ...

  4. char型变量理解

    char  c = 128; printf("%d", c); 问输出是多少? 正确答案应该是-128. 如下几种情况: char c=128;printf("%u\n& ...

  5. 自学Python二 Python中的屠龙刀（续）

    函数 秉承着一切皆对象的理念,函数作为对象,可以为其赋值新的对象名,也可以作为参数传递给其他函数! 正常的诸如空函数,默认参数等等我们就不提了,在这里着重提一下默认参数里面的坑和lambda函数. 当 ...

  6. HDU1009

    题意:有n个房子,每个房子里都有老鼠喜欢吃的咖啡豆J[i],但是每个房子都有猫看守,老鼠现在手上有M的猫粮.可以用猫粮换咖啡豆,每只猫都有猫粮的要求F[i].老鼠得到的咖啡豆是J[i]*a%     ...

  7. 菜鸟学习SSH——目录

    菜鸟学习Struts--配置Struts环境 菜鸟学习Struts--简易计算器 菜鸟学习Struts--bean标签库 菜鸟学习Struts--Scope属性 菜鸟学习Struts--国际化 菜鸟学 ...

  8. linux kernel 0.11 bootsect

    bootsect作用 ①将自己移动到0x90000处 ②将setup从磁盘读到0x90200处 ③将system从磁盘读到0x10000处 寄存器 汇编代码中存在:数据段data seg 栈段 sta ...

  9. JVM学习总结五(番外)——VisualVM

    距离上次介绍Jconsole已经时隔两周了,这期间由于工作中要用go来做一个新项目,所以精力都用在入门go上了,不过发现go语言用起来真的挺不错的,比python感觉还好点,大家没事可以了解下.   ...

  10. UIBezierPath 的使用介绍

         使用UIBezierPath类可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状 ...