<!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 --- 快速排序算法

    在快速排序中引入递归和分治的概念(关于递归和分治的概念会单独写一篇来进行介绍) 问的解决思路: 快速排序的基本思想本身就是分治法,通过分割,将无序序列分成两部分,其中前一部分的元素值都要小于后一部分的 ...

  2. DataFrameNaFunctions无fill方法

    当我使用 spark2.1 ,为了填补 dataframe 里面的 null 值转换为 0 ,代码如下所示: dataframe.na.fill(0) 出现如下错误 Spark version 2.1 ...

  3. 再遇angular（angular4项目实战指南）

    这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...

  4. 学习笔记02（随便看看mybatis源码）

    两个很有名的持久层hibernate和mybatis应该很熟悉不过了,两者最大相同点是底层都是对jdbc的封装,最大的不同点是前者是自动生成sql语句,后者是需要我们在映射文件中写出sql. 其实从以 ...

  5. Python调用ansible API系列（三）带有callback的执行adhoc和playbook

    在第二篇文章中虽然可以执行adhoc和playbook但是执行结果的输出并不是特别直观,虽然没有报错但是到底什么结果其实你是不知道的尤其是在执行adhoc的时候,这时候我们要利用callback来设置 ...

  6. PBFT概念与Go语言入门（Tendermint基础）

    Tendermint作为当前最知名且实用的PBFT框架,网上资料并不很多,而实现Tendermint和以太坊的Go语言,由于相对小众,也存在资料匮乏和模糊错漏的问题.本文简单介绍PBFT概念和Go语言 ...

  7. redis增删查改数据Util

    目录 (1)需要导入的包 (2)redis配置文件 (3)RedisUtil类 (1)需要导入的包 <dependency> <groupId>org.springframew ...

  8. No Transport ，Network中看不到ajax请求

    今天在调试一个后台的接口的时候,突然发现在network中找不到我发送的请求,也就是说,ajax没有在浏览器的network中没有显示.....第一次遇见这样的情况,很苦恼,然后使用ajax中的err ...

  9. 常见文本类css属性

    学习web的第六天 p{ font-size:18px;  /*文本尺寸*/ font-family:"隶书";  /*文本字体*/ font-weight:bold;    /* ...

  10. 秋季学期学习总结&&以及下学期的期待

    秋季总结 第一学期已经结束了,下面来分点归纳下知识点: ·基础编程:利用c语言来进行编程 ·分支结构:利用if-else语句和switch语句编程,以及字符型数据的利用 ·循环结构:利用while.d ...