Jquery,JS实现鼠标滚轮缩小放大拖动图片代码
直接上代码：可以直接使用：
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" lang="utf-8"><head><title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><style>.dragAble {position:relative;cursor:move;}.img-con {position:relative;width: 713px;height: 455px;overflow: hidden;border: 1px solid red;}</style><script language="javascript">//放大缩小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></head><body><p class="img-con"><img src="test.png" class="dragAble" /></p></body></html>
