js/jquery-plugin-panview.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

$.fn.panView = function(width,height) {
	return this.each(function(){
		
		var panViewWidthType = 'static';
		var panViewHeightType = 'static';
		var panId = this.id + "Pan";
		var panMaskId = this.id + "PanMask";
		var mouseState = 'up';
		var mouseStartX = 0;
		var mouseStartY = 0;
		var mouseDropX = 0;
		var mouseDropY = 0;
		var cssWidth;
		var cssHeight;
		var eThis = this; 
		// show image
		$(this).css('display','block');

		// check arguments
		if(width == 'auto') {		
			width = (this.clientWidth < document.body.clientWidth) ? this.clientWidth : document.body.clientWidth;
			panViewWidthType = 'dynamic';
		}
		if(height == 'auto') {
			height = (this.clientHeight < document.body.clientHeight) ? this.clientHeight : document.body.clientHeight;
			panViewHeightType = 'dynamic';
		}
	
		var bounds = new GetElementBounds(eThis);

		function MouseEvent(e) {
			this.e = e ? e : window.event; 
			this.source = e.target ? e.target : e.srcElement;
			this.x = this.e.pageX ? this.e.pageX : this.e.clientX;
			this.y = this.e.pageY ? this.e.pageY : this.e.clientY;
			if(window.event) {
				this.x = (document.body.scrollLeft) ? this.x + document.body.scrollLeft : this.x;
				this.y = (document.body.scrollTop) ? this.y + document.body.scrollTop : this.y;
			}
		}

		function GetElementBounds(o) {
			this.width = o.clientWidth;
			this.height = o.clientHeight;
			this.minX = (width - this.width);
			this.minY = (height - this.height);
			this.maxX = 0;
			this.maxY = 0;
		}
		
		$(this).wrap('<div id="' + panId + '" style="width:' + width + 'px; height:' + height + 'px; overflow:hidden; position: relative;"><div id="' + panMaskId + '" style="left:0px;top:0px;position:relative;"></div></div>');
		
		$(document).resize(function(e) {
			if(panViewWidthType == 'dynamic') {
				width = (this.clientWidth < document.body.clientWidth) ? this.clientWidth : document.body.clientWidth;
				$('div#' + panId).css('width',width + 'px');
			}
			if(panViewHeightType == 'dynamic') {
				height = (this.clientHeight < document.body.clientHeight) ? this.clientHeight : document.body.clientHeight;
				$('div#' + panId).css('height',height + 'px');