<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. 直接拿来用！超实用的Java数组技巧攻略[转]

    来自csdn http://www.csdn.net/article/2013-09-16/2816947-methods-for-java-arrays 本文分享了关于Java数组最顶级的11大方法 ...

  2. GoogleMapApi 发布后提示安全问题

    今天日本那边发过来一个Bug说是Google Map打不开,提示安全问题. 最后发现,日本那边的发布路径如下: https:xxxxx.gspserver.co.jp 而Source中Google M ...

  3. 【C#】使用C#将类序列化为XML

    直接上代码: public static class XmlSerializer { public static void SaveToXml(string filePath, object sour ...

  4. 刀哥多线程同步任务作用gcd-07-sync_task

    同步任务的作用 同步任务,可以让其他异步执行的任务,依赖某一个同步任务 例如:在用户登录之后,再异步下载文件! - (void)gcdDemo1 { dispatch_queue_t queue = ...

  5. MIFARE系列8《D8M1.exe》

    软件名:D8M1.exe 更新时间:2014.06.28 操作系统:windowAll 外部设备:D8读卡器 D8M1可以对MIFARE块读写操作,支持1K,4K.检验KEY后返回SAK,QTAQ,U ...

  6. ubuntu crontab 定时备份postgres数据库并上传ftp服务器

    最近公司要求备份数据库,所以就查了比较作的资料.废话不多说,入正题. 目的:定期备份ubuntu下的postgres数据库,打包上传到指定ftp服务器. 经过查找资料,解决方法: ①编写备份数据库.打 ...

  7. Go语言参数中的三个点是干什么的

    Go语言函数中有三个点...表示为可变参数,可以接受任意个数的参数. 示例代码: package main import "fmt" func Greeting(prefix st ...

  8. centos下安装nagios

    摘要Nagios是一款开源的免费网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等. Nagios是一款开源的免费网络监视工具,能有效监控Wind ...

  9. having count group by

    select count(*) from (select field2,count(field2) from bsgj.table1  group by field,items_id having(c ...

  10. MVC4.0 使用Form认证，自定义登录页面路径Account/Login

    使用MVC4.0的时候,一般遇到会员登录.注册功能,我们都会使用Form认证,给需要身份验证的Action进行授权(需要登录后才能访问的Action添加[Authorize]属性标签),登录.注册的时 ...