以下是 jQuery拼图相册代码 的示例演示效果:
部分效果截图:
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=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.transform-0.9.1.min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<h1>Merging Image Boxes <span>with jQuery</span></h1>
<div id="im_wrapper" class="im_wrapper">
<div style="background-position:0px 0px;"><img src="images/thumbs/1.jpg" alt="" /></div>
<div style="background-position:-125px 0px;"><img src="images/thumbs/2.jpg" alt="" /></div>
<div style="background-position:-250px 0px;"><img src="images/thumbs/3.jpg" alt="" /></div>
<div style="background-position:-375px 0px;"><img src="images/thumbs/4.jpg" alt="" /></div>
<div style="background-position:-500px 0px;"><img src="images/thumbs/5.jpg" alt="" /></div>
<div style="background-position:-625px 0px;"><img src="images/thumbs/6.jpg" alt="" /></div>
<div style="background-position:0px -125px;"><img src="images/thumbs/7.jpg" alt="" /></div>
<div style="background-position:-125px -125px;"><img src="images/thumbs/8.jpg" alt="" /></div>
<div style="background-position:-250px -125px;"><img src="images/thumbs/9.jpg" alt="" /></div>
<div style="background-position:-375px -125px;"><img src="images/thumbs/10.jpg" alt="" /></div>
<div style="background-position:-500px -125px;"><img src="images/thumbs/11.jpg" alt="" /></div>
<div style="background-position:-625px -125px;"><img src="images/thumbs/12.jpg" alt="" /></div>
<div style="background-position:0px -250px;"><img src="images/thumbs/13.jpg" alt="" /></div>
<div style="background-position:-125px -250px;"><img src="images/thumbs/14.jpg" alt="" /></div>
<div style="background-position:-250px -250px;"><img src="images/thumbs/15.jpg" alt="" /></div>
<div style="background-position:-375px -250px;"><img src="images/thumbs/16.jpg" alt="" /></div>
<div style="background-position:-500px -250px;"><img src="images/thumbs/17.jpg" alt="" /></div>
<div style="background-position:-625px -250px;"><img src="images/thumbs/18.jpg" alt="" /></div>
<div style="background-position:0px -375px;"><img src="images/thumbs/19.jpg" alt="" /></div>
<div style="background-position:-125px -375px;"><img src="images/thumbs/20.jpg" alt="" /></div>
<div style="background-position:-250px -375px;"><img src="images/thumbs/21.jpg" alt="" /></div>
<div style="background-position:-375px -375px;"><img src="images/thumbs/22.jpg" alt="" /></div>
<div style="background-position:-500px -375px;"><img src="images/thumbs/23.jpg" alt="" /></div>
<div style="background-position:-625px -375px;"><img src="images/thumbs/24.jpg" alt="" /></div>
</div>
<div id="im_loading" class="im_loading"></div>
<div id="im_next" class="im_next"></div>
<div id="im_prev" class="im_prev"></div>
<div>
<span class="reference">
<a href="http://tympanus.net/codrops/2010/11/30/merging-image-boxes/">back to the Codrops tutorial</a>
<a href="http://www.flickr.com/photos/arcticpuppy/">Images by tibchris</a>
</span>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
//Paul Irish smartresize : http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
//smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
</script>
<script type="text/javascript">
$(function() {
//check if the user made the
//mistake to open it with IE
var ie = false;
if ($.browser.msie)
ie = true;
//flag to control the click event
var flg_click = true;
//the wrapper
var $im_wrapper = $('#im_wrapper');
//the thumbs
var $thumbs = $im_wrapper.children('div');
//all the images
var $thumb_imgs = $thumbs.find('img');
//number of images
var nmb_thumbs = $thumbs.length;
//image loading status
var $im_loading = $('#im_loading');
//the next and previous buttons
var $im_next = $('#im_next');
var $im_prev = $('#im_prev');
//number of thumbs per line
var per_line = 6;
//number of thumbs per column
var per_col = Math.ceil(nmb_thumbs/per_line)
//index of the current thumb
var current = -1;
//mode = grid | single
var mode = 'grid';
//an array with the positions of the thumbs
//we will use it for the navigation in single mode
var positionsArray = [];
for(var i = 0; i < nmb_thumbs; ++i)
positionsArray[i]=i;
//preload all the images
$im_loading.show();
var loaded = 0;
$thumb_imgs.each(function(){
var $this = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == nmb_thumbs*2)
start();
}).attr('src',$this.attr('src'));
$('<img/>').load(function(){
++loaded;
if(loaded == nmb_thumbs*2)
start();
}).attr('src',$this.attr('src').replace('/thumbs',''));
});
//starts the animation
function start(){
$im_loading.hide();
//disperse the thumbs in a grid
disperse();
}
//disperses the thumbs in a grid based on windows dimentions
function disperse(){
if(!flg_click) return;
setflag();
mode = 'grid';
//center point for first thumb along the width of the window
var spaces_w = $(window).width()/(per_line + 1);
//center point for first thumb along the height of the window
var spaces_h = $(window).height()/(per_col + 1);
//let's disperse the thumbs equally on the page
$thumbs.each(function(i){
var $thumb = $(this);
//calculate left and top for each thumb,
//considering how many we want per line
var left = spaces_w*((i%per_line)+1) - $thumb.width()/2;
var top = spaces_h*(Math.ceil((i+1)/per_line)) - $thumb.height()/2;
//lets give a random degree to each thumb
var r = Math.floor(Math.random()*41)-20;
/*
now we animate the thumb to its final positions;
we also fade in its image, animate it to 115x115,
and remove any background image of the thumb - this
is not relevant for the first time we call disperse,
but when changing from single to grid mode
*/
if(ie)
var param = {
'left' : left + 'px',
'top' : top + 'px'
};
else
var param = {
'left' : left + 'px',
'top' : top + 'px',
'rotate' : r + 'deg'
};
$thumb.stop()
.animate(param,700,function(){
if(i==nmb_thumbs-1)
setflag();
})
.find('img')
.fadeIn(700,function(){
$thumb.css({
'background-image' : 'none'
});
$(this).animate({
'width' : '115px',
'height' : '115px',
'marginTop' : '5px',
'marginLeft': '5px'
},150);
});
});
}
//controls if we can click on the thumbs or not
//if theres an animation in progress
//we don't want the user to be able to click
function setflag(){
flg_click = !flg_click
}
/*
when we click on a thumb, we want to merge them
and show the full image that was clicked.
we need to animate the thumbs positions in order
to center the final image in the screen. The
image itself is the background image that each thumb
will have (different background positions)
If we are currently seeing the single image,
then we want to disperse the thumbs again,
and with this, showing the thumbs images.
*/
$thumbs.bind('click',function(){
if(!flg_click) return;
setflag();
var $this = $(this);
current = $this.index();
if(mode == 'grid'){
mode = 'single';
//the source of the full image
var image_src = $this.find('img').attr('src').replace('/thumbs','');
$thumbs.each(function(i){
var $thumb = $(this);
var $image = $thumb.find('img');
//first we animate the thumb image
//to fill the thumbs dimentions
$image.stop().animate({
'width' : '100%',
'height' : '100%',
'marginTop' : '0px',
'marginLeft': '0px'
},150,function(){
//calculate the dimentions of the full image
var f_w = per_line * 125;
var f_h = per_col * 125;
var f_l = $(window).width()/2 - f_w/2
var f_t = $(window).height()/2 - f_h/2
/*
set the background image for the thumb
and animate the thumbs postions and rotation
*/
if(ie)
var param = {
'left' : f_l + (i%per_line)*125 + 'px',
'top' : f_t + Math.floor(i/per_line)*125 + 'px'
};
else
var param = {
'rotate': '0deg',
'left' : f_l + (i%per_line)*125 + 'px',
'top' : f_t + Math.floor(i/per_line)*125 + 'px'
};
$thumb.css({
'background-image' : 'url('+image_src+')'
}).stop()
.animate(param,1200,function(){
//insert navigation for the single mode
if(i==nmb_thumbs-1){
addNavigation();
setflag();
}
});
//fade out the thumb's image
$image.fadeOut(700);
});
});
}
else{
setflag();
//remove navigation
removeNavigation();
//if we are on single mode then disperse the thumbs
disperse();
}
});
//removes the navigation buttons
function removeNavigation(){
$im_next.stop().animate({'right':'-50px'},300);
$im_prev.stop().animate({'left':'-50px'},300);
}
//add the navigation buttons
function addNavigation(){
$im_next.stop().animate({'right':'0px'},300);
$im_prev.stop().animate({'left':'0px'},300);
}
//User clicks next button (single mode)
$im_next.bind('click',function(){
if(!flg_click) return;
setflag();
++current;
var $next_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')');
if($next_thumb.length>0){
var image_src = $next_thumb.find('img').attr('src').replace('/thumbs','');
var arr = Array.shuffle(positionsArray.slice(0));
$thumbs.each(function(i){
//we want to change each divs background image
//on a different point of time
var t = $(this);
setTimeout(function(){
t.css({
'background-image' : 'url('+image_src+')'
});
if(i == nmb_thumbs-1)
setflag();
},arr.shift()*20);
});
}
else{
setflag();
--current;
return;
}
});
//User clicks prev button (single mode)
$im_prev.bind('click',function(){
if(!flg_click) return;
setflag();
--current;
var $prev_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')');
if($prev_thumb.length>0){
var image_src = $prev_thumb.find('img').attr('src').replace('/thumbs','');
var arr = Array.shuffle(positionsArray.slice(0));
$thumbs.each(function(i){
var t = $(this);
setTimeout(function(){
t.css({
'background-image' : 'url('+image_src+')'
});
if(i == nmb_thumbs-1)
setflag();
},arr.shift()*20);
});
}
else{
setflag();
++current;
return;
}
});
//on windows resize call the disperse function
$(window).smartresize(function(){
removeNavigation()
disperse();
});
//function to shuffle an array
Array.shuffle = function( array ){
for(
var j, x, i = array.length; i;
j = parseInt(Math.random() * i),
x = array[--i], array[i] = array[j], array[j] = x
);
return array;
};
});
</script>
<!-- 代码 结束 -->
</body>
</html>
JS代码(jquery.transform-0.9.1.min.js):
/* * jQuery 2d Transform v0.9.1 * http://wiki.github.com/heygrady/transform/ * * Copyright 2010,Grady Kuhnline * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * Date:Fri Nov 26 23:43:06 2010 -0800 */
(function(f,g,j,b){
var h=/progid:DXImageTransform\.Microsoft\.Matrix\(.*?\)/,c=/^([\+\-]=)?([\d+.\-]+)(.*)$/,q=/%/;
var d=j.createElement("modernizr"),e=d.style;
function n(s){
return parseFloat(s)}
function l(){
var s={
transformProperty:"",MozTransform:"-moz-",WebkitTransform:"-webkit-",OTransform:"-o-",msTransform:"-ms-"}
;
for(var t in s){
if(typeof e[t]!="undefined"){
return s[t]}
}
return null}
function r(){
if(typeof(g.Modernizr)!=="undefined"){
return Modernizr.csstransforms}
var t=["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"];
for(var s in t){
if(e[t[s]]!==b){
return true}
}
}
var a=l(),i=a!==null?a+"transform":false,k=a!==null?a+"transform-origin":false;
f.support.csstransforms=r();
if(a=="-ms-"){
i="msTransform";
k="msTransformOrigin"}
f.extend({
transform:function(s){
s.transform=this;
this.$elem=f(s);
this.applyingMatrix=false;
this.matrix=null;
this.height=null;
this.width=null;
this.outerHeight=null;
this.outerWidth=null;
this.boxSizingValue=null;
this.boxSizingProperty=null;
this.attr=null;
this.transformProperty=i;
this.transformOriginProperty=k}
}
);
f.extend(f.transform,{
funcs:["matrix","origin","reflect","reflectX","reflectXY","reflectY","rotate","scale","scaleX","scaleY","skew","skewX","skewY","translate","translateX","translateY"]}
);
f.fn.transform=function(s,t){
return this.each(function(){
var u=this.transform||new f.transform(this);
if(s){
u.exec(s,t)}
}
)}
;
f.transform.prototype={
exec:function(s,t){
t=f.extend(true,{
forceMatrix:false,preserve:false}
,t);
this.attr=null;
if(t.preserve){
s=f.extend(true,this.getAttrs(true,true),s)}
else{
s=f.extend(true,{
}
,s)}
this.setAttrs(s);
if(f.support.csstransforms&&!t.forceMatrix){
return this.execFuncs(s)}
else{
if(f.browser.msie||(f.support.csstransforms&&t.forceMatrix)){
return this.execMatrix(s)}
}
return false}
,execFuncs:function(t){
var s=[];
for(var u in t){
if(u=="origin"){
this[u].apply(this,f.isArray(t[u])?t[u]:[t[u]])}
else{
if(f.inArray(u,f.transform.funcs)!==-1){
s.push(this.createTransformFunc(u,t[u]))}
}
}
this.$elem.css(i,s.join(" "));
return true}
,execMatrix:function(z){
var C,x,t;
var F=this.$elem[0],B=this;
function A(N,M){
if(q.test(N)){
return parseFloat(N)/100*B["safeOuter"+(M?"Height":"Width")]()}
return o(F,N)}
var s=/translate[X|Y]?/,u=[];
for(var v in z){
switch(f.type(z[v])){
case"array":t=z[v];
break;
case"string":t=f.map(z[v].split(","),f.trim);
break;
default:t=[z[v]]}
if(f.matrix[v]){
if(f.cssAngle[v]){
t=f.map(t,f.angle.toDegree)}
else{
if(!f.cssNumber[v]){
t=f.map(t,A)}
else{
t=f.map(t,n)}
}
x=f.matrix[v].apply(this,t);
if(s.test(v)){
u.push(x)}
else{
C=C?C.x(x):x}
}
else{
if(v=="origin"){
this[v].apply(this,t)}
}
}
C=C||f.matrix.identity();
f.each(u,function(M,N){
C=C.x(N)}
);
var K=parseFloat(C.e(1,1).toFixed(6)),I=parseFloat(C.e(2,1).toFixed(6)),H=parseFloat(C.e(1,2).toFixed(6)),G=parseFloat(C.e(2,2).toFixed(6)),L=C.rows===3?parseFloat(C.e(1,3).toFixed(6)):0,J=C.rows===3?parseFloat(C.e(2,3).toFixed(6)):0;
if(f.support.csstransforms&&a==="-moz-"){
this.$elem.css(i,"matrix("+K+","+I+","+H+","+G+","+L+"px,"+J+"px)")}
else{
if(f.support.csstransforms){
this.$elem.css(i,"matrix("+K+","+I+","+H+","+G+","+L+","+J+")")}
else{
if(f.browser.msie){
var w=",FilterType='nearest neighbor'";
var D=this.$elem[0].style;
var E="progid:DXImageTransform.Microsoft.Matrix(M11="+K+",M12="+H+",M21="+I+",M22="+G+",sizingMethod='auto expand'"+w+")";
var y=D.filter||f.curCSS(this.$elem[0],"filter")||"";
D.filter=h.test(y)?y.replace(h,E):y?y+" "+E:E;
this.applyingMatrix=true;
this.matrix=C;
this.fixPosition(C,L,J);
this.applyingMatrix=false;
this.matrix=null}
}
}
return true}
,origin:function(s,t){
if(f.support.csstransforms){
if(typeof t==="undefined"){
this.$elem.css(k,s)}
else{
this.$elem.css(k,s+" "+t)}
return true}
switch(s){
case"left":s="0";
break;
case"right":s="100%";
break;
case"center":case b:s="50%"}
switch(t){
case"top":t="0";
break;
case"bottom":t="100%";
break;
case"center":case b:t="50%"}
this.setAttr("origin",[q.test(s)?s:o(this.$elem[0],s)+"px",q.test(t)?t:o(this.$elem[0],t)+"px"]);
return true}
,createTransformFunc:function(t,u){
if(t.substr(0,7)==="reflect"){
var s=u?f.matrix[t]():f.matrix.identity();
return"matrix("+s.e(1,1)+","+s.e(2,1)+","+s.e(1,2)+","+s.e(2,2)+",0,0)"}
if(t=="matrix"){
if(a==="-moz-"&&u[4]){
u[4]=u[4]?u[4]+"px":0;
u[5]=u[5]?u[5]+"px":0}
}
return t+"("+(f.isArray(u)?u.join(","):u)+")"}
,fixPosition:function(B,y,x,D,s){
var w=new f.matrix.calc(B,this.safeOuterHeight(),this.safeOuterWidth()),C=this.getAttr("origin");
var v=w.originOffset(new f.matrix.V2(q.test(C[0])?parseFloat(C[0])/100*w.outerWidth:parseFloat(C[0]),q.test(C[1])?parseFloat(C[1])/100*w.outerHeight:parseFloat(C[1])));
var t=w.sides();
var u=this.$elem.css("position");
if(u=="static"){
u="relative"}
var A={
top:0,left:0}
;
var z={
position:u,top:(v.top+x+t.top+A.top)+"px",left:(v.left+y+t.left+A.left)+"px",zoom:1}
;
this.$elem.css(z)}
}
;
function o(s,u){
var t=c.exec(f.trim(u));
if(t[3]&&t[3]!=="px"){
var w="paddingBottom",v=f.style(s,w);
f.style(s,w,u);
u=p(s,w);
f.style(s,w,v);
return u}
return parseFloat(u)}
function p(t,u){
if(t[u]!=null&&(!t.style||t.style[u]==null)){
return t[u]}
var s=parseFloat(f.css(t,u));
return s&&s>-10000?s:0}
}
)(jQuery,this,this.document);
(function(d,c,a,f){
d.extend(d.transform.prototype,{
safeOuterHeight:function(){
return this.safeOuterLength("height")}
,safeOuterWidth:function(){
return this.safeOuterLength("width")}
,safeOuterLength:function(l){
var p="outer"+(l=="width"?"Width":"Height");
if(!d.support.csstransforms&&d.browser.msie){
l=l=="width"?"width":"height";
if(this.applyingMatrix&&!this[p]&&this.matrix){
var k=new d.matrix.calc(this.matrix,1,1),n=k.offset(),g=this.$elem[p]()/n[l];
this[p]=g;
return g}
else{
if(this.applyingMatrix&&this[p]){
return this[p]}
}
var o={
height:["top","bottom"],width:["left","right"]}
;
var h=this.$elem[0],j=parseFloat(d.curCSS(h,l,true)),q=this.boxSizingProperty,i=this.boxSizingValue;
if(!this.boxSizingProperty){
q=this.boxSizingProperty=e()||"box-sizing";
i=this.boxSizingValue=this.$elem.css(q)||"content-box"}
if(this[p]&&this[l]==j){
return this[p]}
else{
this[l]=j}
if(q&&(i=="padding-box"||i=="content-box")){
j+=parseFloat(d.curCSS(h,"padding-"+o[l][0],true))||0+parseFloat(d.curCSS(h,"padding-"+o[l][1],true))||0}
if(q&&i=="content-box"){
j+=parseFloat(d.curCSS(h,"border-"+o[l][0]+"-width",true))||0+parseFloat(d.curCSS(h,"border-"+o[l][1]+"-width",true))||0}
this[p]=j;
return j}
return this.$elem[p]()}
}
);
var b=null;
function e(){
if(b){
return b}
var h={
boxSizing:"box-sizing",MozBoxSizing:"-moz-box-sizing",WebkitBoxSizing:"-webkit-box-sizing",OBoxSizing:"-o-box-sizing"}
,g=a.body;
for(var i in h){
if(typeof g.style[i]!="undefined"){
b=h[i];
return b}
}
return null}
}
)(jQuery,this,this.document);
(function(g,f,b,h){
var d=/([\w\-]*?)\((.*?)\)/g,a="data-transform",e=/\s/,c=/,\s?/;
g.extend(g.transform.prototype,{
setAttrs:function(i){
var j="",l;
for(var k in i){
l=i[k];
if(g.isArray(l)){
l=l.join(",")}
j+=" "+k+"("+l+")"}
this.attr=g.trim(j);
this.$elem.attr(a,this.attr)}
,setAttr:function(k,l){
if(g.isArray(l)){
l=l.join(",")}
var j=this.attr||this.$elem.attr(a);
if(!j||j.indexOf(k)==-1){
this.attr=g.trim(j+" "+k+"("+l+")");
this.$elem.attr(a,this.attr)}
else{
var i=[],n;
d.lastIndex=0;
while(n=d.exec(j)){
if(k==n[1]){
i.push(k+"("+l+")")}
else{
i.push(n[0])}
}
this.attr=i.join(" ");
this.$elem.attr(a,this.attr)}
}
,getAttrs:function(){
var j=this.attr||this.$elem.attr(a);
if(!j){
return{
}
}
var i={
}
,l,k;
d.lastIndex=0;
while((l=d.exec(j))!==null){
if(l){
k=l[2].split(c);
i[l[1]]=k.length==1?k[0]:k}
}
return i}
,getAttr:function(j){
var i=this.getAttrs();
if(typeof i[j]!=="undefined"){
return i[j]}
if(j==="origin"&&g.support.csstransforms){
return this.$elem.css(this.transformOriginProperty).split(e)}
else{
if(j==="origin"){
return["50%","50%"]}
}
return g.cssDefault[j]||0}
}
);
if(typeof(g.cssAngle)=="undefined"){
g.cssAngle={
}
}
g.extend(g.cssAngle,{
rotate:true,skew:true,skewX:true,skewY:true}
);
if(typeof(g.cssDefault)=="undefined"){
g.cssDefault={
}
}
g.extend(g.cssDefault,{
scale:[1,1],scaleX:1,scaleY:1,matrix:[1,0,0,1,0,0],origin:["50%","50%"],reflect:[1,0,0,1,0,0],reflectX:[1,0,0,1,0,0],reflectXY:[1,0,0,1,0,0],reflectY:[1,0,0,1,0,0]}
);
if(typeof(g.cssMultipleValues)=="undefined"){
g.cssMultipleValues={
}
}
g.extend(g.cssMultipleValues,{
matrix:6,origin:{
length:2,duplicate:true}
,reflect:6,reflectX:6,reflectXY:6,reflectY:6,scale:{
length:2,duplicate:true}
,skew:2,translate:2}
);
g.extend(g.cssNumber,{
matrix:true,reflect:true,reflectX:true,reflectXY:true,reflectY:true,scale:true,scaleX:true,scaleY:true}
);
g.each(g.transform.funcs,function(j,k){
g.cssHooks[k]={
set:function(n,o){
var l=n.transform||new g.transform(n),i={
}
;
i[k]=o;
l.exec(i,{
preserve:true}
)}
,get:function(n,l){
var i=n.transform||new g.transform(n);
return i.getAttr(k)}
}
}
);
g.each(["reflect","reflectX","reflectXY","reflectY"],function(j,k){
g.cssHooks[k].get=function(n,l){
var i=n.transform||new g.transform(n);
return i.getAttr("matrix")||g.cssDefault[k]}
}
)}
)(jQuery,this,this.document);
(function(e,g,h,c){
var d=/^([+\-]=)?([\d+.\-]+)(.*)$/;
var a=e.fn.animate;
e.fn.animate=function(p,l,o,n){
var k=e.speed(l,o,n),j=e.cssMultipleValues;
k.complete=k.old;
if(!e.isEmptyObject(p)){
if(typeof k.original==="undefined"){
k.original={
}
}
e.each(p,function(s,u){
if(j[s]||e.cssAngle[s]||(!e.cssNumber[s]&&e.inArray(s,e.transform.funcs)!==-1)){
var t=null;
if(jQuery.isArray(p[s])){
var r=1,q=u.length;
if(j[s]){
r=(typeof j[s].length==="undefined"?j[s]:j[s].length)}
if(q>r||(q<r&&q==2)||(q==2&&r==2&&isNaN(parseFloat(u[q-1])))){
t=u[q-1];
u.splice(q-1,1)}
}
k.original[s]=u.toString();
p[s]=parseFloat(u)}
}
)}
return a.apply(this,[arguments[0],k])}
;
var b="paddingBottom";
function i(k,l){
if(k[l]!=null&&(!k.style||k.style[l]==null)){
}
var j=parseFloat(e.css(k,l));
return j&&j>-10000?j:0}
var f=e.fx.prototype.custom;
e.fx.prototype.custom=function(u,v,w){
var y=e.cssMultipleValues[this.prop],p=e.cssAngle[this.prop];
if(y||(!e.cssNumber[this.prop]&&e.inArray(this.prop,e.transform.funcs)!==-1)){
this.values=[];
if(!y){
y=1}
var x=this.options.original[this.prop],t=e(this.elem).css(this.prop),j=e.cssDefault[this.prop]||0;
if(!e.isArray(t)){
t=[t]}
if(!e.isArray(x)){
if(e.type(x)==="string"){
x=x.split(",")}
else{
x=[x]}
}
var l=y.length||y,s=0;
while(x.length<l){
x.push(y.duplicate?x[0]:j[s]||0);
s++}
var k,r,q,o=this,n=o.elem.transform;
orig=e.style(o.elem,b);
e.each(x,function(z,A){
if(t[z]){
k=t[z]}
else{
if(j[z]&&!y.duplicate){
k=j[z]}
else{
if(y.duplicate){
k=t[0]}
else{
k=0}
}
}
if(p){
k=e.angle.toDegree(k)}
else{
if(!e.cssNumber[o.prop]){
r=d.exec(e.trim(k));
if(r[3]&&r[3]!=="px"){
if(r[3]==="%"){
k=parseFloat(r[2])/100*n["safeOuter"+(z?"Height":"Width")]()}
else{
e.style(o.elem,b,k);
k=i(o.elem,b);
e.style(o.elem,b,orig)}
}
}
}
k=parseFloat(k);
r=d.exec(e.trim(A));
if(r){
q=parseFloat(r[2]);
w=r[3]||"px";
if(p){
q=e.angle.toDegree(q+w);
w="deg"}
else{
if(!e.cssNumber[o.prop]&&w==="%"){
k=(k/n["safeOuter"+(z?"Height":"Width")]())*100}
else{
if(!e.cssNumber[o.prop]&&w!=="px"){
e.style(o.elem,b,(q||1)+w);
k=((q||1)/i(o.elem,b))*k;
e.style(o.elem,b,orig)}
}
}
if(r[1]){
q=((r[1]==="-="?-1:1)*q)+k}
}
else{
q=A;
w=""}
o.values.push({
start:k,end:q,unit:w}
)}
)}
return f.apply(this,arguments)}
;
e.fx.multipleValueStep={
_default:function(j){
e.each(j.values,function(k,l){
j.values[k].now=l.start+((l.end-l.start)*j.pos)}
)}
}
;
e.each(["matrix","reflect","reflectX","reflectXY","reflectY"],function(j,k){
e.fx.multipleValueStep[k]=function(n){
var p=n.decomposed,l=e.matrix;
m=l.identity();
p.now={
}
;
e.each(p.start,function(q){
p.now[q]=parseFloat(p.start[q])+((parseFloat(p.end[q])-parseFloat(p.start[q]))*n.pos);
if(((q==="scaleX"||q==="scaleY")&&p.now[q]===1)||((q!=="scaleX"||q!=="scaleY")&&p.now[q]===0)){
return true}
m=m.x(l[q](p.now[q]))}
);
var o;
e.each(n.values,function(q){
switch(q){
case 0:o=parseFloat(m.e(1,1).toFixed(6));
break;
case 1:o=parseFloat(m.e(1,2).toFixed(6));
break;
case 2:o=parseFloat(m.e(2,1).toFixed(6));
break;
case 3:o=parseFloat(m.e(2,2).toFixed(6));
break;
case 4:o=parseFloat(m.e(3,1).toFixed(6));
break;
case 5:o=parseFloat(m.e(3,2).toFixed(6));
break}
n.values[q].now=o}
)}
}
);
e.each(e.transform.funcs,function(j,k){
e.fx.step[k]=function(o){
var n=o.elem.transform||new e.transform(o.elem),l={
}
;
if(e.cssMultipleValues[k]||(!e.cssNumber[k]&&e.inArray(k,e.transform.funcs)!==-1)){
(e.fx.multipleValueStep[o.prop]||e.fx.multipleValueStep._default)(o);
l[o.prop]=[];
e.each(o.values,function(p,q){
l[o.prop].push(q.now+(e.cssNumber[o.prop]?"":q.unit))}
)}
else{
l[o.prop]=o.now+(e.cssNumber[o.prop]?"":o.unit)}
n.exec(l,{
preserve:true}
)}
}
);
e.each(["matrix","reflect","reflectX","reflectXY","reflectY"],function(j,k){
e.fx.step[k]=function(q){
var p=q.elem.transform||new e.transform(q.elem),o={
}
;
if(!q.initialized){
q.initialized=true;
if(k!=="matrix"){
var n=e.matrix[k]().elements;
var r;
e.each(q.values,function(s){
switch(s){
case 0:r=n[0];
break;
case 1:r=n[2];
break;
case 2:r=n[1];
break;
case 3:r=n[3];
break;
default:r=0}
q.values[s].end=r}
)}
q.decomposed={
}
;
var l=q.values;
q.decomposed.start=e.matrix.matrix(l[0].start,l[1].start,l[2].start,l[3].start,l[4].start,l[5].start).decompose();
q.decomposed.end=e.matrix.matrix(l[0].end,l[1].end,l[2].end,l[3].end,l[4].end,l[5].end).decompose()}
(e.fx.multipleValueStep[q.prop]||e.fx.multipleValueStep._default)(q);
o.matrix=[];
e.each(q.values,function(s,t){
o.matrix.push(t.now)}
);
p.exec(o,{
preserve:true}
)}
}
)}
)(jQuery,this,this.document);
(function(g,h,j,c){
var d=180/Math.PI;
var k=200/Math.PI;
var f=Math.PI/180;
var e=2/1.8;
var i=0.9;
var a=Math.PI/200;
var b=/^([+\-]=)?([\d+.\-]+)(.*)$/;
g.extend({
angle:{
runit:/(deg|g?rad)/,radianToDegree:function(l){
return l*d}
,radianToGrad:function(l){
return l*k}
,degreeToRadian:function(l){
return l*f}
,degreeToGrad:function(l){
return l*e}
,gradToDegree:function(l){
return l*i}
,gradToRadian:function(l){
return l*a}
,toDegree:function(n){
var l=b.exec(n);
if(l){
n=parseFloat(l[2]);
switch(l[3]||"deg"){
case"grad":n=g.angle.gradToDegree(n);
break;
case"rad":n=g.angle.radianToDegree(n);
break}
return n}
return 0}
}
}
)}
)(jQuery,this,this.document);
(function(e,d,b,f){
if(typeof(e.matrix)=="undefined"){
e.extend({
matrix:{
}
}
)}
e.extend(e.matrix,{
V2:function(g,h){
if(e.isArray(arguments[0])){
this.elements=arguments[0].slice(0,2)}
else{
this.elements=[g,h]}
this.length=2}
,V3:function(g,i,h){
if(e.isArray(arguments[0])){
this.elements=arguments[0].slice(0,3)}
else{
this.elements=[g,i,h]}
this.length=3}
,M2x2:function(h,g,j,i){
if(e.isArray(arguments[0])){
this.elements=arguments[0].slice(0,4)}
else{
this.elements=Array.prototype.slice.call(arguments).slice(0,4)}
this.rows=2;
this.cols=2}
,M3x3:function(l,k,j,i,h,g,p,o,n){
if(e.isArray(arguments[0])){
this.elements=arguments[0].slice(0,9)}
else{
this.elements=Array.prototype.slice.call(arguments).slice(0,9)}
this.rows=3;
this.cols=3}
}
);
var c={
e:function(j,g){
var h=this.rows,i=this.cols;
if(j>h||g>h||j<1||g<1){
return 0}
return this.elements[(j-1)*i+g-1]}
,decompose:function(){
var u=this.e(1,1),s=this.e(2,1),p=this.e(1,2),o=this.e(2,2),n=this.e(3,1),l=this.e(3,2);
if(Math.abs(u*o-s*p)<0.01){
return{
rotate:0+"deg",skewX:0+"deg",scaleX:1,scaleY:1,translateX:0+"px",translateY:0+"px"}
}
var j=n,i=l;
var t=Math.sqrt(u*u+s*s);
u=u/t;
s=s/t;
var h=u*p+s*o;
p-=u*h;
o-=s*h;
var q=Math.sqrt(p*p+o*o);
p=p/q;
o=o/q;
h=h/q;
if((u*o-s*p)<0){
u=-u;
s=-s;
t=-t}
var v=e.angle.radianToDegree;
var g=v(Math.atan2(s,u));
h=v(Math.atan(h));
return{
rotate:g+"deg",skewX:h+"deg",scaleX:t,scaleY:q,translateX:j+"px",translateY:i+"px"}
}
}
;
e.extend(e.matrix.M2x2.prototype,c,{
toM3x3:function(){
var g=this.elements;
return new e.matrix.M3x3(g[0],g[1],0,g[2],g[3],0,0,0,1)}
,x:function(i){
var j=typeof(i.rows)==="undefined";
if(!j&&i.rows==3){
return this.toM3x3().x(i)}
var h=this.elements,g=i.elements;
if(j&&g.length==2){
return new e.matrix.V2(h[0]*g[0]+h[1]*g[1],h[2]*g[0]+h[3]*g[1])}
else{
if(g.length==h.length){
return new e.matrix.M2x2(h[0]*g[0]+h[1]*g[2],h[0]*g[1]+h[1]*g[3],h[2]*g[0]+h[3]*g[2],h[2]*g[1]+h[3]*g[3])}
}
return false}
,inverse:function(){
var h=1/this.determinant(),g=this.elements;
return new e.matrix.M2x2(h*g[3],h*-g[1],h*-g[2],h*g[0])}
,determinant:function(){
var g=this.elements;
return g[0]*g[3]-g[1]*g[2]}
}
);
e.extend(e.matrix.M3x3.prototype,c,{
x:function(i){
var j=typeof(i.rows)==="undefined";
if(!j&&i.rows<3){
i=i.toM3x3()}
var h=this.elements,g=i.elements;
if(j&&g.length==3){
return new e.matrix.V3(h[0]*g[0]+h[1]*g[1]+h[2]*g[2],h[3]*g[0]+h[4]*g[1]+h[5]*g[2],h[6]*g[0]+h[7]*g[1]+h[8]*g[2])}
else{
if(g.length==h.length){
return new e.matrix.M3x3(h[0]*g[0]+h[1]*g[3]+h[2]*g[6],h[0]*g[1]+h[1]*g[4]+h[2]*g[7],h[0]*g[2]+h[1]*g[5]+h[2]*g[8],h[3]*g[0]+h[4]*g[3]+h[5]*g[6],h[3]*g[1]+h[4]*g[4]+h[5]*g[7],h[3]*g[2]+h[4]*g[5]+h[5]*g[8],h[6]*g[0]+h[7]*g[3]+h[8]*g[6],h[6]*g[1]+h[7]*g[4]+h[8]*g[7],h[6]*g[2]+h[7]*g[5]+h[8]*g[8])}
}
return false}
,inverse:function(){
var h=1/this.determinant(),g=this.elements;
return new e.matrix.M3x3(h*(g[8]*g[4]-g[7]*g[5]),h*(-(g[8]*g[1]-g[7]*g[2])),h*(g[5]*g[1]-g[4]*g[2]),h*(-(g[8]*g[3]-g[6]*g[5])),h*(g[8]*g[0]-g[6]*g[2]),h*(-(g[5]*g[0]-g[3]*g[2])),h*(g[7]*g[3]-g[6]*g[4]),h*(-(g[7]*g[0]-g[6]*g[1])),h*(g[4]*g[0]-g[3]*g[1]))}
,determinant:function(){
var g=this.elements;
return g[0]*(g[8]*g[4]-g[7]*g[5])-g[3]*(g[8]*g[1]-g[7]*g[2])+g[6]*(g[5]*g[1]-g[4]*g[2])}
}
);
var a={
e:function(g){
return this.elements[g-1]}
}
;
e.extend(e.matrix.V2.prototype,a);
e.extend(e.matrix.V3.prototype,a)}
)(jQuery,this,this.document);
(function(c,b,a,d){
if(typeof(c.matrix)=="undefined"){
c.extend({
matrix:{
}
}
)}
c.extend(c.matrix,{
calc:function(e,f,g){
this.matrix=e;
this.outerHeight=f;
this.outerWidth=g}
}
);
c.matrix.calc.prototype={
coord:function(e,i,h){
h=typeof(h)!=="undefined"?h:0;
var g=this.matrix,f;
switch(g.rows){
case 2:f=g.x(new c.matrix.V2(e,i));
break;
case 3:f=g.x(new c.matrix.V3(e,i,h));
break}
return f}
,corners:function(e,h){
var f=!(typeof(e)!=="undefined"||typeof(h)!=="undefined"),g;
if(!this.c||!f){
h=h||this.outerHeight;
e=e||this.outerWidth;
g={
tl:this.coord(0,0),bl:this.coord(0,h),tr:this.coord(e,0),br:this.coord(e,h)}
}
else{
g=this.c}
if(f){
this.c=g}
return g}
,sides:function(e){
var f=e||this.corners();
return{
top:Math.min(f.tl.e(2),f.tr.e(2),f.br.e(2),f.bl.e(2)),bottom:Math.max(f.tl.e(2),f.tr.e(2),f.br.e(2),f.bl.e(2)),left:Math.min(f.tl.e(1),f.tr.e(1),f.br.e(1),f.bl.e(1)),right:Math.max(f.tl.e(1),f.tr.e(1),f.br.e(1),f.bl.e(1))}
}
,offset:function(e){
var f=this.sides(e);
return{
height:Math.abs(f.bottom-f.top),width:Math.abs(f.right-f.left)}
}
,area:function(e){
var h=e||this.corners();
var g={
x:h.tr.e(1)-h.tl.e(1)+h.br.e(1)-h.bl.e(1),y:h.tr.e(2)-h.tl.e(2)+h.br.e(2)-h.bl.e(2)}
,f={
x:h.bl.e(1)-h.tl.e(1)+h.br.e(1)-h.tr.e(1),y:h.bl.e(2)-h.tl.e(2)+h.br.e(2)-h.tr.e(2)}
;
return 0.25*Math.abs(g.e(1)*f.e(2)-g.e(2)*f.e(1))}
,nonAffinity:function(){
var f=this.sides(),g=f.top-f.bottom,e=f.left-f.right;
return parseFloat(parseFloat(Math.abs((Math.pow(g,2)+Math.pow(e,2))/(f.top*f.bottom+f.left*f.right))).toFixed(8))}
,originOffset:function(h,g){
h=h?h:new c.matrix.V2(this.outerWidth*0.5,this.outerHeight*0.5);
g=g?g:new c.matrix.V2(0,0);
var e=this.coord(h.e(1),h.e(2));
var f=this.coord(g.e(1),g.e(2));
return{
top:(f.e(2)-g.e(2))-(e.e(2)-h.e(2)),left:(f.e(1)-g.e(1))-(e.e(1)-h.e(1))}
}
}
}
)(jQuery,this,this.document);
(function(c,b,a,d){
if(typeof(c.matrix)=="undefined"){
c.extend({
matrix:{
}
}
)}
c.extend(c.matrix,{
identity:function(g){
g=g||2;
var h=g*g,j=new Array(h),f=g+1;
for(var e=0;
e<h;
e++){
j[e]=(e%f)===0?1:0}
return new c.matrix["M"+g+"x"+g](j)}
,matrix:function(){
var e=Array.prototype.slice.call(arguments);
switch(arguments.length){
case 4:return new c.matrix.M2x2(e[0],e[2],e[1],e[3]);
case 6:return new c.matrix.M3x3(e[0],e[2],e[4],e[1],e[3],e[5],0,0,1)}
}
,reflect:function(){
return new c.matrix.M2x2(-1,0,0,-1)}
,reflectX:function(){
return new c.matrix.M2x2(1,0,0,-1)}
,reflectXY:function(){
return new c.matrix.M2x2(0,1,1,0)}
,reflectY:function(){
return new c.matrix.M2x2(-1,0,0,1)}
,rotate:function(i){
var f=c.angle.degreeToRadian(i),h=Math.cos(f),j=Math.sin(f);
var g=h,e=j,l=-j,k=h;
return new c.matrix.M2x2(g,l,e,k)}
,scale:function(f,e){
f=f||f===0?f:1;
e=e||e===0?e:f;
return new c.matrix.M2x2(f,0,0,e)}
,scaleX:function(e){
return c.matrix.scale(e,1)}
,scaleY:function(e){
return c.matrix.scale(1,e)}
,skew:function(h,f){
h=h||0;
f=f||0;
var i=c.angle.degreeToRadian(h),g=c.angle.degreeToRadian(f),e=Math.tan(i),j=Math.tan(g);
return new c.matrix.M2x2(1,e,j,1)}
,skewX:function(e){
return c.matrix.skew(e)}
,skewY:function(e){
return c.matrix.skew(0,e)}
,translate:function(f,e){
f=f||0;
e=e||0;
return new c.matrix.M3x3(1,0,f,0,1,e,0,0,1)}
,translateX:function(e){
return c.matrix.translate(e)}
,translateY:function(e){
return c.matrix.translate(0,e)}
}
)}
)(jQuery,this,this.document);
CSS代码(lrtk.css):
*{margin:0;padding:0;}
body{background:#f0f0f0 url(../images/bg.jpg) repeat top left;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#555;}
h1{font-size:38px;margin:10px;}
h1 span{font-size:20px;}
.im_wrapper div{left:-500px;width:125px;height:125px;position:absolute;background-repeat:no-repeat;background-color:#fff;cursor:pointer;-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000;}
.im_wrapper div img{float:left;width:115px;height:115px;margin:5px 0px 0px 5px;}
.im_loading{display:none;position:fixed;top:50%;left:50%;margin:-35px 0px 0px -35px;background:#fff url(../images/loader.gif) no-repeat center center;width:70px;height:70px;z-index:9999;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
.im_next,.im_prev{width:50px;height:50px;position:fixed;bottom:50%;margin-top:-25px;cursor:pointer;opacity:0.7;z-index:1000;-moz-box-shadow:0px 0px 3px #000;-webkit-box-shadow:0px 0px 3px #000;box-shadow:0px 0px 3px #000;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
.im_next:hover,.im_prev:hover{opacity:0.9;}
.im_next{background:#fff url(../images/next.png) no-repeat center center;right:-50px;/*10 to show*/
}
.im_prev{background:#fff url(../images/prev.png) no-repeat center center;left:-50px;/*10 to show*/
}
.description{position:fixed;right:10px;top:10px;font-size:12px;color:#888;}
span.reference{position:fixed;left:10px;bottom:10px;font-size:12px;}
span.reference a{color:#888;text-transform:uppercase;text-decoration:none;padding-right:20px;}
span.reference a:hover{color:#444;}
分享到QQ
分享到微博
微信扫一扫
