<!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. 『备注』GDI+ 绘制文本有锯齿，透明背景文本绘制

    背景: GDI+ 绘制文本 时,如果 背景是透明的 —— 则会出现 锯齿. //其实,我不用这三个 属性 好多年了 //而且,这三个属性 在关键时刻还有可能 帮倒忙 //关键是:这三个属性,鸟用都没有 ...

  2. 【swoole】如何在docker+swoole环境下测试udp服务

    前面几篇文章讲了使用 docker+swoole 环境来测试tcp服务以及如何测试,但是当我开始学习udp服务那块的时候,发现使用原来的方式在 docker+swoole 环境下行不通啦,后来发现如果 ...

  3. javascript语言精粹-笔记

    walkDOM function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkThe ...

  4. MongoDB通过Shell 实现集合的日常归档

    1.MongoDB数据归档的意义 和其他类型的数据库一样,归档对MongoDB同样重要.通过归档,可以保持集合中合适的数据量,对数据库的性能是一种保障,也就是大家常说的数据冷热分离. 同时,归档对数据 ...

  5. Abp通用配置模块的设计

    引言 约定优于配置,配置趋于灵活 约定优于配置(convention over configuration),也称作按约定编程,是一种软件设计范式,旨在减少软件开发人员需做决定的数量,获得简单的好处, ...

  6. Java　Main参数解析(Args4j)

    最近实现一个工具,Main函数会有很多参数,而且参数类型不同,为了统一解析,网上找到三方工具类Args4j,轻松搞定. 代码实例如下: 定义解析类: import java.io.File impor ...

  7. redis bind连不上的坑

    由于需要在内网其他服务器上连接redis服务器(192.168.1.110),本想直接在redis配置文件中加上目标的IP地址: bind 192.168.1.166 就可以了,实际上不正确. red ...

  8. Ansible自动化运维工具安装与使用实例

    1.准备两台服务器,要确定网络是通的.服务器当然越多越好啦....Ansible的简介和好处我就不多说了,自己看百科去(*╹▽╹*) IP:192.168.139.100 IP:192.168.139 ...

  9. 网络协议 20 - RPC 协议（上）- 基于XML的SOAP协议

    [前五篇]系列文章传送门: 网络协议 15 - P2P 协议:小种子大学问 网络协议 16 - DNS 协议:网络世界的地址簿 网络协议 17 - HTTPDNS:私人定制的 DNS 服务 网络协议 ...

  10. 在Linux系统配置Nodejs环境的最简单步骤，部署多个thinkjs（nodejs）项目

    发现一台服务器部署管理多个nodejs服务,可以采用二级域名weekly.mwcxs.top,也可以采用固定后缀www.mwcxs.top/weekly的方式,本文先从固定后缀的方式部署管理多个nod ...