html图片滚轮缩放,JS滚轮控制图片缩放大小和拖动的实例代码

JS滚轮控制图片缩放大小和拖动的实例代码

发布时间：2020-10-26 07:40:32

来源：脚本之家

阅读：91

作者：小角色Byme

具体代码如下所示：

Document

.dragAble {

position: relative;

cursor: move;

}

.img-con {

position: relative;

width: 713px;

height: 455px;

overflow: hidden;

border: 1px solid red;

}

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";

});

}