以下是 jquery马赛克图片翻转拼接特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery马赛克图片翻转拼接</title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="style/demo.css" />
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="js/jquery.flip.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var container = $('#container');
var containerHeight = parseInt(container.height())/100;
var containerWidth = parseInt(container.width())/100;
var blockCount = (containerHeight * containerWidth);
for(x = 1; x <= blockCount; x++) {
randomNum = Math.floor(Math.random()*4) + parseFloat(1);
container.append('<div class="block' + randomNum + '"></div>');
}
$('#container div').addClass('black');
var stack = {
'delay': 150,
'actions': [],
'run': function() {
if (stack.actions.length) {
stack.actions.shift()();
setTimeout(stack.run, stack.delay);
}
}
};
$('#container div').each(function(){
var that = this;
stack.actions.push(function(){
$(that).flip({
color: '#ffffff',
speed: 70,
direction:'lr',
onEnd: function() {
$(that).removeClass('black');
}
});
});
});
stack.run();
});
</script>
</head>
<body>
<p class="title">jquery马赛克图片翻转拼接</p>
<div id="container">
</div>
</body>
</html>
JS代码(jquery.flip.min.js):
eval(function(p,a,c,k,e,r){
e=function(c){
return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
if(!''.replace(/^/,String)){
while(c--)r[e(c)]=k[c]||e(c);
k=[function(e){
return r[e]}
];
e=function(){
return'\\w+'}
;
c=1}
;
while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
return p}
('(5($){
5 L(a){
a.3x.1F[a.3r]=3o(a.3n,10)+a.3l}
6 j=5(a){
3k({
3i:"1E.1d.3d 3c 3b",38:a}
)}
;
6 k=5(){
7(/*@2S!@*/
19&&(2Q 2N.1w.1F.2K==="2F"))}
;
6 l={
2C:[0,4,4],2B:[1u,4,4],2y:[1s,1s,2v],2u:[0,0,0],2t:[0,0,4],2s:[1q,1p,1p],2o:[0,4,4],2n:[0,0,B],2m:[0,B,B],2l:[1b,1b,1b],2j:[0,1c,0],2i:[2h,2g,1o],2e:[B,0,B],2d:[2c,1o,2b],2a:[4,1n,0],27:[24,21,20],1Z:[B,0,0],1Y:[1R,1P,1O],1N:[3s,0,Y],2f:[4,0,4],1Q:[4,2z,0],2E:[0,t,0],22:[26,0,28],29:[1u,1z,1n],2p:[2r,2w,1z],2x:[1h,4,4],2A:[1i,2G,1i],2L:[Y,Y,Y],2M:[4,2O,2W],33:[4,4,1h],34:[0,4,0],35:[4,0,4],36:[t,0,0],39:[0,0,t],3e:[t,t,0],3j:[4,1q,0],3m:[4,W,3t],1H:[t,0,t],1I:[t,0,t],1J:[4,0,0],1K:[W,W,W],1L:[4,4,4],1M:[4,4,0],9:[4,4,4]}
;
6 m=5(a){
U(a&&a.1j("#")==-1&&a.1j("(")==-1){
7"1S("+l[a].1T()+")"}
1U{
7 a}
}
;
$.1V($.1W.1X,{
w:L,x:L,u:L,v:L}
);
$.1k.23=5(){
7 V.1l(5(){
6 a=$(V);
a.1d(a.F(\'1m\'))}
)}
;
$.1k.1d=5(i){
7 V.1l(5(){
6 c=$(V),3,$8,C,11,1f,1e=k();
U(c.F(\'S\')){
7 19}
6 e={
R:(5(a){
2k(a){
X"T":7"Z";
X"Z":7"T";
X"15":7"14";
X"14":7"15";
2q:7"Z"}
}
)(i.R),y:m(i.A)||"#H",A:m(i.y)||c.z("12-A"),1r:c.N(),D:i.D||1t,Q:i.Q||5(){
}
,K:i.K||5(){
}
,P:i.P||5(){
}
}
;
c.F(\'1m\',e).F(\'S\',1).F(\'2D\',e);
3={
s:c.s(),p:c.p(),y:m(i.y)||c.z("12-A"),1v:c.z("2H-2I")||"2J",R:i.R||"T",E:m(i.A)||"#H",D:i.D||1t,o:c.1x().o,n:c.1x().n,1y:i.1r||2P,9:"9",18:i.18||19,Q:i.Q||5(){
}
,K:i.K||5(){
}
,P:i.P||5(){
}
}
;
1e&&(3.9="#2R");
$8=c.z("16","2T").8(2U).F(\'S\',1).2V("1w").N("").z({
16:"1g",2X:"2Y",n:3.n,o:3.o,2Z:0,30:31,"-32-1A-1B":"G G G #1C","-37-1A-1B":"G G G #1C"}
);
6 f=5(){
7{
1D:3.9,1v:0,3a:0,w:0,u:0,v:0,x:0,M:3.9,O:3.9,I:3.9,J:3.9,12:"3f",3g:\'3h\',p:0,s:0}
}
;
6 g=5(){
6 a=(3.p/1c)*25;
6 b=f();
b.s=3.s;
7{
"q":b,"1a":{
w:0,u:a,v:a,x:0,M:\'#H\',O:\'#H\',o:(3.o+(3.p/2)),n:(3.n-a)}
,"r":{
x:0,w:0,u:0,v:0,M:3.9,O:3.9,o:3.o,n:3.n}
}
}
;
6 h=5(){
6 a=(3.p/1c)*25;
6 b=f();
b.p=3.p;
7{
"q":b,"1a":{
w:a,u:0,v:0,x:a,I:\'#H\',J:\'#H\',o:3.o-a,n:3.n+(3.s/2)}
,"r":{
w:0,u:0,v:0,x:0,I:3.9,J:3.9,o:3.o,n:3.n}
}
}
;
11={
"T":5(){
6 d=g();
d.q.w=3.p;
d.q.M=3.y;
d.r.x=3.p;
d.r.O=3.E;
7 d}
,"Z":5(){
6 d=g();
d.q.x=3.p;
d.q.O=3.y;
d.r.w=3.p;
d.r.M=3.E;
7 d}
,"15":5(){
6 d=h();
d.q.u=3.s;
d.q.I=3.y;
d.r.v=3.s;
d.r.J=3.E;
7 d}
,"14":5(){
6 d=h();
d.q.v=3.s;
d.q.J=3.y;
d.r.u=3.s;
d.r.I=3.E;
7 d}
}
;
C=11[3.R]();
1e&&(C.q.3p="3q(A="+3.9+")");
1f=5(){
6 a=3.1y;
7 a&&a.1E?a.N():a}
;
$8.17(5(){
3.Q($8,c);
$8.N(\'\').z(C.q);
$8.13()}
);
$8.1G(C.1a,3.D);
$8.17(5(){
3.P($8,c);
$8.13()}
);
$8.1G(C.r,3.D);
$8.17(5(){
U(!3.18){
c.z({
1D:3.E}
)}
c.z({
16:"1g"}
);
6 a=1f();
U(a){
c.N(a)}
$8.3u();
3.K($8,c);
c.3v(\'S\');
$8.13()}
)}
)}
}
)(3w);
',62,220,'|||flipObj|255|function|var|return|clone|transparent||||||||||||||left|top|height|start|second|width|128|borderLeftWidth|borderRightWidth|borderTopWidth|borderBottomWidth|bgColor|css|color|139|dirOption|speed|toColor|data|0px|999|borderLeftColor|borderRightColor|onEnd|int_prop|borderTopColor|html|borderBottomColor|onAnimation|onBefore|direction|flipLock|tb|if|this|192|case|211|bt||dirOptions|background|dequeue|rl|lr|visibility|queue|dontChangeColor|false|first|169|100|flip|ie6|newContent|visible|224|144|indexOf|fn|each|flipRevertedSettings|140|107|42|165|content|245|500|240|fontSize|body|offset|target|230|box|shadow|000|backgroundColor|jquery|style|animate|purple|violet|red|silver|white|yellow|darkviolet|122|150|gold|233|rgb|toString|else|extend|fx|step|darksalmon|darkred|204|50|indigo|revertFlip|153||75|darkorchid|130|khaki|darkorange|47|85|darkolivegreen|darkmagenta|fuchsia|183|189|darkkhaki|darkgreen|switch|darkgrey|darkcyan|darkblue|cyan|lightblue|default|173|brown|blue|black|220|216|lightcyan|beige|215|lightgreen|azure|aqua|flipSettings|green|undefined|238|font|size|12px|maxHeight|lightgrey|lightpink|document|182|null|typeof|123456|cc_on|hidden|true|appendTo|193|position|absolute|margin|zIndex|9999|webkit|lightyellow|lime|magenta|maroon|moz|message|navy|lineHeight|error|plugin|js|olive|none|borderStyle|solid|name|orange|throw|unit|pink|now|parseInt|filter|chroma|prop|148|203|remove|removeData|jQuery|elem'.split('|'),0,{
}
))CSS代码(demo.css):
body{text-align:center;background:url('../images/background.png');color:#FFFFFF;}
#container{margin-left:auto;margin-right:auto;margin-top:5%;display:block;width:600px;height:400px;background:#fff url('../images/IPad.png') center center no-repeat;position:relative;overflow:hidden;-webkit-border-radius:5px;}
.block1{background-image:-webkit-gradient(linear,100% 0%,0% 100%,from(#666666),to(#FFFFFF),color-stop(.35,#FFFFFF));background-image:-moz-linear-gradient(100% 0% 225deg,#666666,#FFFFFF,#FFFFFF 50%);opacity:.25;width:100px;height:100px;float:left;}
.block2{background-image:-webkit-gradient(linear,100% 0%,0% 80%,from(#666666),to(#FFFFFF),color-stop(.7,#FFFFFF));background-image:-moz-linear-gradient(100% 0% 225deg,#666666,#FFFFFF,#FFFFFF 100%);opacity:.25;width:100px;height:100px;float:left;}
.block3{background-image:-webkit-gradient(linear,100% 0%,50% 90%,from(#666666),to(#FFFFFF),color-stop(.7,#FFFFFF));background-image:-moz-linear-gradient(100% 0% 225deg,#666666,#FFFFFF,#FFFFFF 86%);opacity:.25;width:100px;height:100px;float:left;}
.block4{background-image:-webkit-gradient(linear,10% 100%,50% 0%,from(#666666),to(#FFFFFF),color-stop(.4,#FFFFFF));background-image:-moz-linear-gradient(0% 100% 36deg,#666666,#FFFFFF,#FFFFFF 80%);opacity:.25;width:100px;height:100px;float:left;}
.black{background:#fff;opacity:1;}
.title{color:#fff;font-size:25px;font-weight:bold;margin-top:1em;text-shadow:0px 1px 0px #000;}
a,a:visited{color:#fff;text-decoration:none;text-shadow:0px 1px 0px #000;}
a:hover{border-bottom:1px dotted #fff;}
分享到QQ
分享到微博
微信扫一扫
