<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .dragAble {

        position: relative;

        cursor: move;

    }

    .img-con {

        position: relative;

        width: 713px;

        height: 455px;

        overflow: hidden;

        border: 1px solid red;

    }

    </style>

</head>

<body>

    <p class="img-con"><img src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" class="dragAble" /></p>

    <script type="text/javascript" charset="utf-8">

    window.onload = function() {

            var oImg = document.getElementsByTagName("img")[0];

            function fnWheel(obj, fncc) {

                obj.onmousewheel = fn;

                if (obj.addEventListener) {

                    obj.addEventListener('DOMMouseScroll', fn, false);

                }

                function fn(ev) {

                    var oEvent = ev || window.event;

                    var down = true;

                    if (oEvent.detail) {

                        down = oEvent.detail > 0

                    } else {

                        down = oEvent.wheelDelta < 0

                    }

                    if (fncc) {

                        fncc.call(this, down, oEvent);

                    }

                    if (oEvent.preventDefault) {

                        oEvent.preventDefault();

                    }

                    return false;

                }

            };

            fnWheel(oImg, function(down, oEvent) {

                var oldWidth = this.offsetWidth;

                var oldHeight = this.offsetHeight;

                var oldLeft = this.offsetLeft;

                var oldTop = this.offsetTop;

                var scaleX = (oEvent.clientX - oldLeft) / oldWidth; //比例

                var scaleY = (oEvent.clientY - oldTop) / oldHeight;

                if (down) {

                    this.style.width = this.offsetWidth * 0.9 + "px";

                    this.style.height = this.offsetHeight * 0.9 + "px";

                } else {

                    this.style.width = this.offsetWidth * 1.1 + "px";

                    this.style.height = this.offsetHeight * 1.1 + "px";

                }

                var newWidth = this.offsetWidth;

                var newHeight = this.offsetHeight;

                this.style.left = oldLeft - scaleX * (newWidth - oldWidth) + "px";

                this.style.top = oldTop - scaleY * (newHeight - oldHeight) + "px";

            });

        }

        <!--

        //拖拽

    var ie = document.all;

    var nn6 = document.getElementByIdx && !document.all;

    var isdrag = false;

    var y, x;

    var oDragObj;

    function moveMouse(e) {

        if (isdrag) {

            oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";

            oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";

            return false;

        }

    }

    function initDrag(e) {

        var oDragHandle = nn6 ? e.target : event.srcElement;

        var topElement = "HTML";

        while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {

            oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;

        }

        if (oDragHandle.className == "dragAble") {

            isdrag = true;

            oDragObj = oDragHandle;

            nTY = parseInt(oDragObj.style.top + 0);

            y = nn6 ? e.clientY : event.clientY;

            nTX = parseInt(oDragObj.style.left + 0);

            x = nn6 ? e.clientX : event.clientX;

            document.onmousemove = moveMouse;

            return false;

        }

    }

    document.onmousedown = initDrag;

    document.onmouseup = new Function("isdrag=false");

    </script>

</body>

</html>

只缩放

 <!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<img border="0" src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" onmousewheel="return rollImg(this)">

</body>

<script language="javascript">

function rollImg(o){

   /* 获取当前页面的缩放比

       若未设置zoom缩放比，则为默认100%，即1，原图大小

   */

   var zoom=parseInt(o.style.zoom)||100;

   /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom

       wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动

   */

   zoom+=event.wheelDelta/12;

   /* 如果缩放比大于0，则将缩放比加载到页面元素 */

   if (zoom>0) o.style.zoom=zoom+'%';

   /* 如果缩放比不大于0，则返回false，不执行操作 */

   return false;

}

</script>

</html>

js 滚轮控制图片缩放大小和拖动的更多相关文章

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

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

  2. JS/JQuery控制图片宽度

    function changeImgWidth(){ for (i = 0; i <$('#info img').length; i++) { var imgWidth=$('#info img ...

  3. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

  4. ZoomControls控件是一个可以缩放控件，可以实现两个按钮控制图片的大小

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

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

    1. 

  6. 通过JS简单实现图片缩放

    ;display: none;cursor: pointer;} #FullScreenDiv{;display: none;background-color: #919191;filter: alp ...

  7. jQuery.rotate.js（控制图片转动）

    jQuery.rotate.js笔记   1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...

  8. js脚本控制图片水平与垂直居中

    使用方法: 1.定义ResizeImg(obj)方法 function ResizeImg(obj) { var boxHeight = $(".box").height(); v ...

  9. android关于图片缩放

    网上有许多关于图片缩放的demo,本人都感觉不怎么好用,最近在github看到了 一个简单的支持多指缩放图片的Android View类 gesture-imageview (地址:https://g ...

随机推荐

  1. 强化学习(十九) AlphaGo Zero强化学习原理

    在强化学习(十八) 基于模拟的搜索与蒙特卡罗树搜索(MCTS)中,我们讨论了MCTS的原理和在棋类中的基本应用.这里我们在前一节MCTS的基础上,讨论下DeepMind的AlphaGo Zero强化学 ...

  2. .net接收post请求并把数据转为字典格式

    public SortedDictionary<string, string> GetRequestPost() { int i = 0; SortedDictionary<stri ...

  3. 01 Java jdk环境配置

    1.1 书籍(B) [1] java核心技术 [2] 实战java 1.2 网址(B) oracle.com http://www.ibm.com/developerWorks/cn/ https:/ ...

  4. MySQL5.7下面，误操作导致的drop table db1.tb1; 的恢复方法：

    MySQL5.7下面,误操作导致的drop table db1.tb1; 的恢复方法: 0.停业务数据写入.[iptables封禁] 1.从备份服务器上拉取最新的一个全备文件,恢复到一个临时的服务器上 ...

  5. react-native 金币彩带雨下落动画

    日常项目中,经常遇到一些表情雨/金币雨/彩带雨 等下落的动画,之前做android原生的时候,写过类似的效果,主要通过自定义view 在onDraw里绘制下落的过程,具体可以看下我的这篇github地 ...

  6. 2、自动化运维之SaltStack远程执行详解

    SaltStack远程执行详解 ●目标(Targeting) ●模块(Module) ●返回(Returnners) 混合模式-C 选项 主机名设置参照: redis-node1-redis03-id ...

  7. LogWriter: Operating system error 21(error not found) encountered

      一台老旧的数据库服务器(SQL Server 2005)突然报如下错误,而且数据库处于RECOVERY PENDING ,检查错误日志,发现这个错误是突然出现的.没有任何其它人为误操作导致 Dat ...

  8. 关于Redis和Memcache的比较

    关于Redis和Memcache在应用中,都可以实现缓存的功能,但是,具体使用情况需要根据具体业务场景,尤其是对缓存数据有特性要求时,需要选择对应的缓存机制. 共同点: 都是基于内存的数据库,可用作缓 ...

  9. SQLServer多表联查，多表分页查询

    多表联查: select p.*,s.Sheng , i.Shifrom  [dbo].[ProductRecordInfo]   --表名 p left join [ShengInfo] s on ...

  10. nginx通过域名访问项目（不接项目名称），cookie丢失问题详解

    最近搞了个域名,想用它直接去访问Tomcat上部署的项目,开始一直必须加上项目名称,经过短暂配置,成功了. 访问一次,到达登陆页面,结果死活登录不进去,一直在登陆界面,原来是由于cookie丢失,现配 ...