<!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;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<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),
disX = oEvent.clientX - oImg.offsetLeft,
disY = oEvent.clientY - oImg.offsetTop,
startMove = function(ev) {
var oEvent = ev || window.event,
l = oEvent.clientX - disX,
t = oEvent.clientY - disY;
oImg.style.left = l +'px';
oImg.style.top = t +'px';
}, endMove = function(ev) {
removeEvent(document, 'mousemove', startMove);
removeEvent(document, 'mouseup', endMove);
};
addEvent(document, 'mousemove', startMove);
addEvent(document, 'mouseup', endMove);
return false;
});
})();
/*以鼠标位置为中心的滑轮放大功能*/
(function() {
var initW = oImg.offsetLeft
,initH = oImg.offsetHeight;
addWheelEvent(oImg, function(delta) {
if(delta && +(oImg.offsetWidth/initW).toFixed(1)<0.5){return}
if(!delta && +(oImg.offsetWidth/initW).toFixed(1) > 5){return;}
var ratioL = (this.clientX - oImg.offsetLeft) / oImg.offsetWidth,
ratioT = (this.clientY - oImg.offsetTop) / oImg.offsetHeight;
scale = !delta ? 1 + 0.1 : 1 - 0.1;
var w = parseInt(oImg.offsetWidth * scale),
h = parseInt(oImg.offsetHeight * scale),
l = Math.round(this.clientX - (w * ratioL)),
t = Math.round(this.clientY - (h * ratioT));
$(oImg).css({
'width':w+'px'
,'height':h+'px'
,'left':l+'px'
,'top':t+'px'
})
});
})();
};
/**
* ele.offsetLeft：获取的永远都是相对于最近的已定位的祖先元素的position属性值
* 如果img对象有 translate(-50%,-50%)值
* 那么 , 图片距离最近的已定位的祖先实际距离 = 距离祖先元素偏移量 - 自身宽度的一半
* oImg.offsetLeft - parseInt(oImg.offsetWidth/2)
* */
</script>
</head>
<body>
<div style="height: 100%;">
<img src="img/natural2.jpg" id="oImg" width="600" style="position: relative;left: 50%;top:50%;transform: translate(-50%,-50%);display: block;height: 600px;">
</div>
</body>
</html>
