以鼠标位置为中心的滑轮放大功能demo1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>以鼠标位置为中心的滑轮放大功能demo</title>

<style type="text/css">

html, body {

    height: 100%;

    overflow: hidden;

}

body {

    margin: 0;

    padding: 0;

}

#oImg {

    position: absolute;

    left: 50px;

    top: 50px;

    z-index: 1;

}

</style>

<script type="text/javascript">

/*绑定事件*/

function addEvent(obj, sType, fn) {

    if (obj.addEventListener) {

        obj.addEventListener(sType, fn, false);

    } else {

        obj.attachEvent('on' + sType, fn);

    }

};

function removeEvent(obj, sType, fn) {

    if (obj.removeEventListener) {

        obj.removeEventListener(sType, fn, false);

    } else {

        obj.detachEvent('on' + sType, fn);

    }

};

function prEvent(ev) {

    var oEvent = ev || window.event;

    if (oEvent.preventDefault) {

        oEvent.preventDefault();

    }

    return oEvent;

}

/*添加滑轮事件*/

function addWheelEvent(obj, callback) {

    if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {

        addEvent(obj, 'DOMMouseScroll', wheel);

    } else {

        addEvent(obj, 'mousewheel', wheel);

    }

    function wheel(ev) {

        var oEvent = prEvent(ev),

        delta = oEvent.detail ? oEvent.detail > 0 : oEvent.wheelDelta < 0;

        callback && callback.call(oEvent, delta);

        return false;

    }

};

/*页面载入后*/

window.onload = function() {

    var oImg = document.getElementById('oImg');

    /*拖拽功能*/

    (function() {

        addEvent(oImg, 'mousedown', function(ev) {

            var oEvent = prEvent(ev),

            oParent = oImg.parentNode,

            disX = oEvent.clientX - oImg.offsetLeft,

            disY = oEvent.clientY - oImg.offsetTop,

            startMove = function(ev) {

                if (oParent.setCapture) {

                    oParent.setCapture();

                }

                var oEvent = ev || window.event,

                L = oEvent.clientX - disX,

                T = oEvent.clientY - disY;

                oImg.style.left = L +'px';

                oImg.style.top = T +'px';

                oParent.onselectstart = function() {

                    return false;

                }

            }, endMove = function(ev) {

                if (oParent.releaseCapture) {

                    oParent.releaseCapture();

                }

                oParent.onselectstart = null;

                removeEvent(oParent, 'mousemove', startMove);

                removeEvent(oParent, 'mouseup', endMove);

            };

            addEvent(oParent, 'mousemove', startMove);

            addEvent(oParent, 'mouseup', endMove);

            return false;

        });

    })();

    /*以鼠标位置为中心的滑轮放大功能*/

    (function() {

        addWheelEvent(oImg, function(delta) {

            var ratioL = (this.clientX - oImg.offsetLeft) / oImg.offsetWidth,

            ratioT = (this.clientY - oImg.offsetTop) / oImg.offsetHeight,

            ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,

            w = parseInt(oImg.offsetWidth * ratioDelta),

            h = parseInt(oImg.offsetHeight * ratioDelta),

            l = Math.round(this.clientX - (w * ratioL)),

            t = Math.round(this.clientY - (h * ratioT));

            with(oImg.style) {

                width = w +'px';

                height = h +'px';

                left = l +'px';

                top = t +'px';

            }

        });

    })();

};

</script>

</head>

<body>

<img id="oImg" src="data:images/demo.jpg" />

</body>

</html>

JS-以鼠标位置为中心的滑轮放大功能demo1的更多相关文章

  1. 在WPF里面实现以鼠标位置为中心缩放移动图片

    原文:在WPF里面实现以鼠标位置为中心缩放移动图片 在以前的文章使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果里面,介绍了如何在WPF里面移动和放大缩小图片, ...

  2. JS获取鼠标位置，兼容IE FF

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

  3. js获取鼠标位置的各种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  4. JS获得鼠标位置

    <body> <script> function mouseMove(ev) { ev = ev || window.event; var mousePos = mouseCo ...

  5. js判断鼠标位置是否在某个div中

    div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...

  6. js获取鼠标位置

    1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即 ...

  7. js 获取 鼠标位置 和获取元素位置

    ]; body.addEventListener("mousemove", outpostion); function outpostion() { console.log(&qu ...

  8. js 实现页面局部（或图片）放大功能(vue)

    方法: adjustStart1 (e) { e.preventDefault() let event = e.touches if (event.length === 2) { this.style ...

  9. js获得鼠标的位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. linux文件名匹配

    *   匹配文件名中的任何字符串,包括空字符串. ? 匹配文件名中的任何单个字符. [...]   匹配[ ]中所包含的任何字符. [!...]   匹配[ ]中非感叹号!之后的字符. 如: s*   ...

  2. 51nod 1021 石子归并 【区间DP】

    1021 石子归并  基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 N堆石子摆成一条线.现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆石子 ...

  3. zzc种田

    题目背景 可能以后 zzc就去种田了. 题目描述 田地是一个巨大的矩形,然而zzc 每次只能种一个正方形,而每种一个正方形时zzc所花的体力值是正方形的周长,种过的田不可以再种,zzc很懒还要节约体力 ...

  4. 七. 多线程编程2.Java线程模型

    Java运行系统在很多方面依赖于线程,所有的类库设计都考虑到多线程.实际上,Java使用线程来使整个环境异步.这有利于通过防止CPU循环的浪费来减少无效部分. 为更好的理解多线程环境的优势可以将它与它 ...

  5. iOS GCD 拾遗

    GCD里就有三种queue(分派队列)来处理. 1. Main queue:(主队列) 顾名思义,运行在主线程,由dispatch_get_main_queue获得.和ui相关的就要使用Main Qu ...

  6. Object 类中的 equals方法

    1 相等与同一 如果两个对象具有相同的类型以及相同的属性值,则称这两个对象相等.如果两个引用对象指的是同一个对像,则称这两个变量同一.Object类中定义的equals 函数原型为:public bo ...

  7. 本地启动tomcat的时候报内存溢出错误：java.util.concurrent.ExecutionException: java.lang.OutOfMemoryError: PermGen space

    问题分析: PermGen space的全称是Permanent Generation space,是指内存的永久保存区域,这块内存主要是被JVM存放Class和Meta信息的,Class在被Load ...

  8. log4j教程 10、PatternLayout

    如果想生成基于模式的特定格式的日志信息,那么可以使用 org.apache.log4j.PatternLayout 格式化日志信息. PatternLayout类扩展抽象 org.apache.log ...

  9. ElasticSearch 排序

    1.相关性排序 ElasticSearch为了按照相关性来排序,需要将相关性表示为一个数值,在 Elasticsearch 中, 相关性得分 由一个浮点数进行表示,并在搜索结果中通过 _score 参 ...

  10. angular 中的$event 对象包含了浏览器原生的event对象

    ou can pass the $event object as an argument when calling the function. The $event object contains t ...