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

以鼠标位置为中心的滑轮放大功能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="images/demo.jpg" />
</body>
</html>
JS-以鼠标位置为中心的滑轮放大功能demo1

推荐阅读
