<!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. HTTPS和TCP协议三次握手设计

    1. 我们的TCP 三次握手大概是长这样 2.那么为什么 TCP 要采取三次握手,而不是两次或其他 首先我们要知道握手的目的: 为了保证通讯双方建立的连接是可靠的. 同时,为了保证性能,握手的次数要求 ...

  2. 设计模式之过滤器模式——Java语言描述

    过滤器模式允许开发人员使用不同的标准来过滤一组对象,通过逻辑运算以解耦的方式把它们连接起来 实现 创建一个Person对象.Criteria 接口和实现了该接口的实体类,来过滤 Person 对象的列 ...

  3. Android ADB命令详解

    adb的全称为Android Debug Bridge.是android司机经常用到的工具 . 你能在本篇文章中学到什么? adb基本指令 Shell AM&PM adb模拟用户事件 logc ...

  4. Android之CircleImageView使用

    文章大纲 一.什么是CircleImageView二.代码实战三.项目源码下载 一.什么是CircleImageView   圆角 ImageView,在我们的 App 中这个想必是太常见了,也许我们 ...

  5. 学习ELK之----01.建立ELK测试项目

    1. 建立一个4G内存的虚拟机,安装Linux系统(具体的版本以能运行Docker为准,我用的是Ubuntu-Server) 2. 安装Docker 3. 下载elk容器:# docker pull ...

  6. PostgreSQL 10.7 linux 主从配置

    PostgreSQL 10.7 主从安装 硬件环境 云服务商:华为云 Linux: CentOS7.1 工具:Xshell Xftp IP:114.115.251.168 Port: 5432 543 ...

  7. 第八周LINUX学习笔记

    vsftpd丶NFS丶SAMBA nfs基于rpcsamba基于cifs(smb)  DRBD: ftp:File Transfer protocol 文件传输协议 两个连接:       tcp:命 ...

  8. 通过命令行设置Windows 时区

    我们在进行自动测试的时候,不同的测试程序对于时区的要求不同,所以在开始的时候需要根据测试程序的要求了设置时区. Windows 提供了一个工具来进行时区设置.tzutil.exe. 目录:C:\Win ...

  9. Storm入门（十三）Storm Trident 教程

    转自:http://blog.csdn.net/derekjiang/article/details/9126185 英文原址:https://github.com/nathanmarz/storm/ ...

  10. gin+gorm

    在[环境变量]中添加如下[用户变量]/[系统变量]:GO111MODULE,值为on go mod init目录 在项目中新建文件main.go,并添加测试代码 package main import ...