/ Published in: JavaScript
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.
You can found the sample in the page, too.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<script type="text/javascript"> (function($){ function parseCSS(obj,css){ var r=0; obj.css(css).replace(/\b(\d+)px\b/,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>
URL: http://cloudgen.w0ng.hk/jquery/simple.zoomGlass.php