jQuery简单ZoomGlass插件

Posted 2021-02-26

This is a zoom glass effect. Simply download jQuery and the plugin and apply the code as described in http://cloudgen.w0ng.hk/jquery/simple.zoomGlass.php
You can found the sample in the page, too.

<script type="text/javascript">
(function($){
	function parseCSS(obj,css){
		var r=0;
		obj.css(css).replace(/(d+)px/,function(s,t){r=parseInt(t)});
		return r;
	}
	function Lens(target,width,height,callBack){
		if(target){
			var w=width||50,h=height||50;
			this.callBack=(typeof callBack=="function")?callBack:function(){};
			this.target=$(target);
			this.disabled=false;
			this.callBack=callBack||function(){};
			this.anchor=this.target.wrap(document.createElement("a")).closest("a").data("Lens",this)
				.unbind("mouseover").unbind("mouseout").unbind("mousemove")
				.hover(function(e){
				$(this).data("Lens").show(e)
			},function(){
				$(this).data("Lens").hide()
			}).mousemove(function(e){
				$(this).data("Lens").show(e)
			});
			var jNode=$('<div style="background-color:#FFF;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);position:absolute;z-index:900;'
				+'cursor:crosshair;"></div>').css({width:w,height:h}).appendTo(this.anchor).hide();
			this.jNode=jNode.css({top:this.target.offset().top,left:this.target.offset().left});
			this.offset={top:this.target.offset().top+parseCSS(this.target,'borderTopWidth'),left:this.target.offset().left+parseCSS(this.target,'borderLeftWidth'),width:w,height:h};
			this.adjustedTarget={top:this.target.offset().top+parseCSS(this.target,'borderTopWidth'),left:this.target.offset().left+parseCSS(this.target,'borderLeftWidth')}
			this.target.data("Lens",this);
		}
	}
	Lens.prototype.remove=function(){
		this.jNode.remove();
	};
	Lens.prototype.show=function(e){
		if(!this.disabled){
			this.mouseX=e.pageX;
			this.mouseY=e.pageY;
			this.offset.left=parseInt(this.mouseX-this.offset.width/2);
			this.offset.left=(this.offset.left<this.adjustedTarget.left)?this.adjustedTarget.left:this.offset.left;
			this.offset.left=(this.offset.left>this.adjustedTarget.left+this.target.width()-this.offset.width)
				?this.adjustedTarget.left+this.target.width()-this.offset.width:this.offset.left;
			this.offset.top=parseInt(this.mouseY-this.offset.height/2);
			this.offset.top=(this.offset.top<this.adjustedTarget.top)?this.adjustedTarget.top:this.offset.top;
			this.offset.top=(this.offset.top>this.adjustedTarget.top+this.target.height()-this.offset.height)
				?this.adjustedTarget.top+this.target.height()-this.offset.height:this.offset.top;
			this.jNode.css({top:this.offset.top,left:this.offset.left});
			this.relative={top:parseInt(this.offset.top-this.adjustedTarget.top),left:parseInt(this.offset.left-this.adjustedTarget.left)};
			this.jNode.show();
			if(typeof this.callBack=="function") this.callBack.apply(this.target);
		}
	};
	Lens.prototype.hide=function(){
		this.jNode.hide();
	};
	Lens.prototype.disable=function(){
		this.disabled=true;
	};
	Lens.prototype.enable=function(){
		this.disabled=false;
	};
	$.fn.addLens=function(width,height,callBack){
		var w,h,c;
		if(typeof width=="function") c=width;
		else c=(typeof callBack=="function")?callBack:function(){};
		w=(typeof width!="number") ?100:width;
		h=(typeof height!="number") ?100:height;
		new Lens(this,w,h,c);
	};
	$.fn.showLens=function(){
		this.data("Lens").show();
	};
	$.fn.hideLens=function(){
		this.data("Lens").hide();
	};
	$.fn.removeLens=function(){
		this.data("Lens").remove();
	};
	function ClippedImage(target,src,width,height,top,left){
		this.clipped={};
		this.clipped.left=left||0;
		this.clipped.top=top||0;
		this.clipped.width=width||100;
		this.clipped.height=height||100;
		this.src=src;
		this.target=$(target).data("ClippedImage",this).css({overflow:"hidden",width:width+"px",height:height+"px"}).
			append('<div style="position:relative;left:'+(0-left)+'px;top:'+(0-top)+'px;"><img border="0" src="'+this.src+'"/></div>');
		return this
	}
	ClippedImage.prototype.clipTo=function(top,left,width,height){
		this.clipped.left=left||this.clipped.left;
		this.clipped.top=top||this.clipped.top;
		this.clipped.width=width||this.clipped.width;
		this.clipped.height=height||this.clipped.height;
		this.target.find("div").css({left:(0-this.clipped.left)+"px",top:(0-this.clipped.top)+"px",
			width:this.clipped.width+"px",height:this.clipped.height+"px"});
		return this
	}
	$.fn.addZoomGlass=function(obj,largeImg_url,width,height,clippedImageWidth,clippedImageHeight){
		var w,h;
		w=(typeof width!="number") ?50:width;
		h=(typeof height!="number") ?50:height;
		var h_scale=clippedImageWidth*1.0/width;
		var v_scale=clippedImageHeight*1.0/height;
		var ci=$(obj).addClippedImage(largeImg_url,clippedImageWidth,clippedImageHeight).data("ClippedImage");
		ci.target.find("img").width(parseInt(this.width()*h_scale)).height(parseInt(this.height()*v_scale));
		new Lens(this,w,h,function(){
			var left=parseInt($(this).data("Lens").relative.left*h_scale);
			var top=parseInt($(this).data("Lens").relative.top*v_scale);
			ci.clipTo(top,left)
		});
	};
	$.fn.addClippedImage=function(src,width,height,top,left){
		new ClippedImage(this,src,width,height,top,left);
		return this
	}
	$.fn.clipImageTo=function(top,left,width,height){
		this.data("ClippedImage").clipTo(top,left,width,height);
		return this
	}
	$.fn.addLens=function(width,height,callBack){
		var w,h,c;
		if(typeof width=="function") c=width;
		else c=(typeof callBack=="function")?callBack:function(){};
		w=(typeof width!="number") ?50:width;
		h=(typeof height!="number") ?50:height;
		new Lens(this,w,h,c);
	};
	$.fn.showLens=function(){
		this.data("Lens").show();
	};
	$.fn.hideLens=function(){
		this.data("Lens").hide();
	};
	$.fn.removeLens=function(){
		this.data("Lens").remove();
	};
})(jQuery);
</script>