jquery图片鼠标拖动效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片鼠标拖动效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jquery图片鼠标拖动效果代码</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>

附件:下载该文件资源,减少时间成本(增值服务)