<!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. Python函数小节

    定义函数时,默认参数必须指向不变的对象 参数为可变对象时,正常调用的时候,结果没有问题,但是当使用默认参数的时候,结果就会和理想的有差距. In [78]: def add(L=[]): ...: L ...

  2. 关于Node.js中的路径问题

    在前端学习过程中,涉及到路径的问题非常多,相对路径,绝对路径等.有时候明明觉得没问题,但是还是会出错.或者说线下没问题,但是到了线上就出现问题,因此弄懂路径问题,非常关键.我们需要知道为什么这个地方既 ...

  3. 基于promise对小程序http请求方法封装

    原因是我不想每次请求都复制粘贴那么长的请求地址,所以我把前边那一坨请求地址作为基础地址,只传后台给的路由就ok,而且,并不是每次请求都要显示正在加载,这对小程序体验很差,所以,我加了个形参,用来判断是 ...

  4. SQL优化指南

    慢查询日志 开启撒网模式 开启了MySQL慢查询日志之后,MySQL会自动将执行时间超过指定秒数的SQL统统记录下来,这对于搜罗线上慢SQL有很大的帮助. SHOW VARIABLES LIKE 's ...

  5. 史诗级Java资源大全中文版

    本文来自GitHub 上 Awesome - java 系列的资源整理.awesome-java 就是 akullpp 发起维护的 Java 资源列表,内容包括:构建工具.数据库.框架.模板.安全.代 ...

  6. Jmeter + Grafana搭建实时监控可视化

    小贴士: 建议使用jmeter3.3+版本,在这个版本以后才有backend listenter 对接influxDB. Jmeter中backend listenter如图 ​ influxdbUr ...

  7. Postgresql数据库部署之：Postgresql本机启动和Postgresql注册成windows 服务

    1.初始化并创建数据库(一次即可)  initdb \data --locale=chs -U postgres -W  You can now start the database server u ...

  8. Windows10家庭版运行应用提示”管理员已阻止你运行此应用...“的解决办法

    win10版本家庭中文版: 运行应用程序报错: 解决办法(亲试): 1.进入”控制面板“--”用户账户“--”用户账户“,选择”更改用户账户控制设置“,选择最后一项,点击”确定“按钮,如下图: 2.按 ...

  9. MySQL性能优化总结___本文乃《MySQL性能调优与架构设计》读书笔记！

    一.MySQL的主要适用场景 1.Web网站系统 2.日志记录系统 3.数据仓库系统 4.嵌入式系统 二.MySQL架构图: 三.MySQL存储引擎概述 1)MyISAM存储引擎 MyISAM存储引擎 ...

  10. 百度地图点击地图显示地址详情的默认方法怎么关闭，去掉百度地图api图标信息

    去掉百度地图api图标信息 调用百度地图API时,如果想去掉百度的logo,只需要在css里设置: <style> .anchorBL{display:none} </style&g ...