jQuery.imagecode1k={ dsettings: { code1kby: 3, //default increase factor of enlarged image duration: 500, //default duration of animation, in millisec imgopacity: 0.2 //opacify of original image when enlarged image overlays it }, cursorcss: 'url(code1k.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image zIndexcounter: 100,
refreshoffsets:function($window, $target, warpshell){ var $offsets=$target.offset() var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()} warpshell.attrs.x=$offsets.left //update x position of original image relative to page warpshell.attrs.y=$offsets.top warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2 warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2 if (warpshell.newattrs.xwarpshell.newattrs.x=winattrs.x+5 } else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right? warpshell.newattrs.x=winattrs.x+5 } if (warpshell.newattrs.ywarpshell.newattrs.y=winattrs.y+5 } },
code1k:function($, $target, options){ var setting={} //create blank object to store combined settings var setting=jQuery.extend(setting, this.dsettings, options) var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()} var newattrs={} newattrs.w=(setting.code1kto)? setting.code1kto : Math.round(attrs.w*setting.code1kby) newattrs.h=(setting.code1kto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.code1kby) $target.css('cursor', jQuery.imagecode1k.cursorcss) if ($target.data('imgshell')){ $target.data('imgshell').$clone.remove() $target.css({opacity:1}).unbind('click.code1k') } var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body) $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with $target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs}) $target.bind('click.code1k', function(e){ //action when original image is clicked on var $this=$(this).css({opacity:setting.imgopacity}) var imageinfo=$this.data('imgshell') jQuery.imagecode1k.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images var $clone=imageinfo.$clone $clone.stop().css({zIndex:++jQuery.imagecode1k.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible'}) .animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration, function(){ //callback function after warping is complete //none added }) //end animate }) //end click $clone.click(function(e){ //action when magnified image is clicked on var $this=$(this) var imageinfo=$this.data('$relatedtarget').data('imgshell') jQuery.imagecode1k.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images $this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration, function(){ $this.hide() $this.data('$relatedtarget').css({opacity:1}) //reveal original image }) //end animate }) //end click } };
jQuery.fn.imagecode1k=function(options){ var $=jQuery return this.each(function(){ //return jQuery obj var $imgref=$(this) if (this.tagName!="IMG") return true //skip to next matched element if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined jQuery.imagecode1k.code1k($, $imgref, options) } else if (this.complete){ //account for IE not firing image.onload jQuery.imagecode1k.code1k($, $imgref, options) } else{ $(this).bind('load', function(){ jQuery.imagecode1k.code1k($, $imgref, options) }) } }) };
jQuery.fn.applyMagnifier=function(options){ //dynamic version of imagecode1k() to apply code1k effect to an image dynamically var $=jQuery return this.each(function(){ //return jQuery obj var $imgref=$(this) if (this.tagName!="IMG") return true //skip to next matched element
})
};
//** The following applies the code1k effect to images with class="code1k" and optional "data-code1kby" and "data-code1kduration" attrs //** It also looks for links with attr rel="code1k[targetimageid]" and makes them togglers for that image
jQuery(document).ready(function($){ var $targets=$('.code1k') $targets.each(function(i){ var $target=$(this) var options={} if ($target.attr('data-code1kto')) options.code1kto=parseFloat($target.attr('data-code1kto')) if ($target.attr('data-code1kby')) options.code1kby=parseFloat($target.attr('data-code1kby')) if ($target.attr('data-code1kduration')) options.duration=parseInt($target.attr('data-code1kduration')) $target.imagecode1k(options) }) var $triggers=$('a[rel^="code1k["]') $triggers.each(function(i){ var $trigger=$(this) var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='code1k[id]' $trigger.data('code1kimageid', targetid) $trigger.click(function(e){ $('#'+$(this).data('code1kimageid')).trigger('click.code1k') e.preventDefault() }) }) })
Hãy cảm ơn bài viết của DongPhong bằng cách bấm vào"" nhé!!!
Tiêuđề
tập hợp những code cũ của 4r(cảm phiền bà con không pm ò spam nhé,topic mang tính bảo mật)
Tiêu đề: tập hợp những code cũ của 4r(cảm phiền bà con không pm ò spam nhé,topic mang tính bảo mật) 
Sun Apr 03, 2011 3:10 pm
{postrow.displayed.POSTER_NAME} 
Hãy cảm ơn bài viết của 
" nhé!!! 
