<!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>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
<script type="text/javascript">
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 H(a){a.1D.1f[a.1E]=1F(a.1G,10)+a.1H}6 j=5(a){1I({1J:"1g.Z.1K 1L 1M",1N:a})};6 k=5(){7(/*@[email protected]*/11&&(1P 1Q.1h.1f.1R==="1S"))};6 l={1T:[0,4,4],1U:[1i,4,4],1V:[1j,1j,1W],1X:[0,0,0],1Y:[0,0,4],1Z:[1k,1l,1l],20:[0,4,4],21:[0,0,A],22:[0,A,A],23:[12,12,12],24:[0,13,0],26:[27,28,1m],29:[A,0,A],2a:[2b,1m,2c],2d:[4,1n,0],2e:[2f,2g,2h],2i:[A,0,0],2j:[2k,2l,2m],2n:[2o,0,R],2p:[4,0,4],2q:[4,2r,0],2s:[0,t,0],2t:[2u,0,2v],2w:[1i,1o,1n],2x:[2y,2z,1o],2A:[1p,4,4],2B:[1q,2C,1q],2D:[R,R,R],2E:[4,2F,2G],2H:[4,4,1p],2I:[0,4,0],2J:[4,0,4],2K:[t,0,0],2L:[0,0,t],2M:[t,t,0],2N:[4,1k,0],2O:[4,S,2P],2Q:[t,0,t],2R:[t,0,t],2S:[4,0,0],2T:[S,S,S],2U:[4,4,4],2V:[4,4,0],9:[4,4,4]};6 m=5(a){T(a&&a.1r("#")==-1&&a.1r("(")==-1){7"2W("+l[a].2X()+")"}2Y{7 a}};$.2Z($.30.31,{u:H,v:H,w:H,x:H});$.1s.32=5(){7 U.1t(5(){6 a=$(U);a.Z(a.B(\'1u\'))})};$.1s.Z=5(i){7 U.1t(5(){6 c=$(U),3,$8,C,14,15,16=k();T(c.B(\'V\')){7 11}6 e={I:(5(a){33(a){W"X":7"Y";W"Y":7"X";W"17":7"18";W"18":7"17";34:7"Y"}})(i.I),y:m(i.D)||"#E",D:m(i.y)||c.z("19-D"),1v:c.J(),F:i.F||1w,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};c.B(\'1u\',e).B(\'V\',1).B(\'35\',e);3={s:c.s(),n:c.n(),y:m(i.y)||c.z("19-D"),1x:c.z("36-37")||"38",I:i.I||"X",G:m(i.D)||"#E",F:i.F||1w,o:c.1y().o,p:c.1y().p,1z:i.1v||39,9:"9",1a:i.1a||11,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};16&&(3.9="#3a");$8=c.z("1b","3b").8(3c).B(\'V\',1).3d("1h").J("").z({1b:"1A",3e:"3f",p:3.p,o:3.o,3g:0,3h:3i});6 f=5(){7{1B:3.9,1x:0,3j:0,u:0,w:0,x:0,v:0,N:3.9,O:3.9,P:3.9,Q:3.9,19:"3k",3l:\'3m\',n:0,s:0}};6 g=5(){6 a=(3.n/13)*25;6 b=f();b.s=3.s;7{"q":b,"1c":{u:0,w:a,x:a,v:0,N:\'#E\',O:\'#E\',o:(3.o+(3.n/2)),p:(3.p-a)},"r":{v:0,u:0,w:0,x:0,N:3.9,O:3.9,o:3.o,p:3.p}}};6 h=5(){6 a=(3.n/13)*25;6 b=f();b.n=3.n;7{"q":b,"1c":{u:a,w:0,x:0,v:a,P:\'#E\',Q:\'#E\',o:3.o-a,p:3.p+(3.s/2)},"r":{u:0,w:0,x:0,v:0,P:3.9,Q:3.9,o:3.o,p:3.p}}};14={"X":5(){6 d=g();d.q.u=3.n;d.q.N=3.y;d.r.v=3.n;d.r.O=3.G;7 d},"Y":5(){6 d=g();d.q.v=3.n;d.q.O=3.y;d.r.u=3.n;d.r.N=3.G;7 d},"17":5(){6 d=h();d.q.w=3.s;d.q.P=3.y;d.r.x=3.s;d.r.Q=3.G;7 d},"18":5(){6 d=h();d.q.x=3.s;d.q.Q=3.y;d.r.w=3.s;d.r.P=3.G;7 d}};C=14[3.I]();16&&(C.q.3n="3o(D="+3.9+")");15=5(){6 a=3.1z;7 a&&a.1g?a.J():a};$8.1d(5(){3.K($8,c);$8.J(\'\').z(C.q);$8.1e()});$8.1C(C.1c,3.F);$8.1d(5(){3.M($8,c);$8.1e()});$8.1C(C.r,3.F);$8.1d(5(){T(!3.1a){c.z({1B:3.G})}c.z({1b:"1A"});6 a=15();T(a){c.J(a)}$8.3p();3.L($8,c);c.3q(\'V\');$8.1e()})})}})(3r);', 62, 214, '|||flipObj|255|function|var|return|clone|transparent||||||||||||||height|top|left|start|second|width|128|borderTopWidth|borderBottomWidth|borderLeftWidth|borderRightWidth|bgColor|css|139|data|dirOption|color|999|speed|toColor|int_prop|direction|html|onBefore|onEnd|onAnimation|borderTopColor|borderBottomColor|borderLeftColor|borderRightColor|211|192|if|this|flipLock|case|tb|bt|flip||false|169|100|dirOptions|newContent|ie6|lr|rl|background|dontChangeColor|visibility|first|queue|dequeue|style|jquery|body|240|245|165|42|107|140|230|224|144|indexOf|fn|each|flipRevertedSettings|content|500|fontSize|offset|target|visible|backgroundColor|animate|elem|prop|parseInt|now|unit|throw|name|js|plugin|error|message|cc_on|typeof|document|maxHeight|undefined|aqua|azure|beige|220|black|blue|brown|cyan|darkblue|darkcyan|darkgrey|darkgreen||darkkhaki|189|183|darkmagenta|darkolivegreen|85|47|darkorange|darkorchid|153|50|204|darkred|darksalmon|233|150|122|darkviolet|148|fuchsia|gold|215|green|indigo|75|130|khaki|lightblue|173|216|lightcyan|lightgreen|238|lightgrey|lightpink|182|193|lightyellow|lime|magenta|maroon|navy|olive|orange|pink|203|purple|violet|red|silver|white|yellow|rgb|toString|else|extend|fx|step|revertFlip|switch|default|flipSettings|font|size|12px|null|123456|hidden|true|appendTo|position|absolute|margin|zIndex|9999|lineHeight|none|borderStyle|solid|filter|chroma|remove|removeData|jQuery'.split('|'), 0, {}))
$(document).ready(function() {
//******************* SETTING THE FLIP ********************//
// direction : Set the direction of the flipped div
// lr : Left to right
// rl : Right to left
// tb : Top to bottom
// bt : Bottom to top
//
// color : Set the color of your div
// speed : Set the time speed to flip (default : 300)
//*********************************************************//
var params = {
direction: 'lr',
color: 'black',
speed: 220
};
//******************* SETTING THE WORKS ********************//
// title : Set the title of your work
// image : Set the image of your work
// description : Set the description of your work
// website : Set the link of your work or your full size image
//
// How to create many works ?
// Simply copy and paste the lines : " title1 : { ... }, "
// after your last works and complete the setting.
//*********************************************************//
var works = {
title1: {
image: 'facebook.png',
description: 'Description One.',
website: 'http://www.facebook.com'
}, // End title1
title2: {
image: 'google.png',
description: 'Description Two.',
website: 'http://www.google.com'
}, // End title2
title3: {
image: 'adobe.png',
description: 'Description Three.',
website: 'http://www.adobe.com'
}// End title3
}; // End var works
//******************* SETTING THE PATH OF WORKS ************//
// pathBegin : Set the path of your works
// pathEnd : DOES NOT CHANGE
//*********************************************************//
var path = {
pathBegin: '<img src="img/works/',
pathEnd: '"/>'
};
// A - CONSTRUCT THE DIV
$.each(works, function (i, work) {
// work div
$('<div/>', {
'id': 'workId' + i,
'class': 'work'
}).appendTo("#workListId");
// workFlip div
$('<div/>', {
'id': 'workFlipId' + i,
'class': 'workFlip'
}).appendTo("#workId" + i);
// workData div
$('<div/>', {
'id': 'workDataId' + i,
'class': 'workData'
}).appendTo("#workId" + i);
// workDescription div
$('<div/>', {
'id': 'workDescriptionId' + i,
'class': 'workDescription'
}).appendTo("#workDataId" + i);
// workURL div
$('<div/>', {
'id': 'workURLId' + i,
'class': 'workURL'
}).appendTo("#workDataId" + i);
// Insert the content in each div
$("#workFlipId" + i).html(path.pathBegin + work.image + path.pathEnd);
$("#workDescriptionId" + i).html('<p>' + work.description + '</p>');
$("#workURLId" + i).html('<a href="' + work.website + '">Read more...</a>');
}); //End foreach
// B - CONSTRUCT THE DIV FLIP
/* The code is executed once the DOM is loaded */
$('.work').bind("click", function() {
// $(this) point to the clicked .workFlip element (caching it in elem for speed):
var elt = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elt.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elt.revertFlip();
// Unsetting the flag:
elt.data('flipped', true);
} // End if
else {
// Using the flip method defined by the plugin:
elt.flip({
direction: params.direction,
color: params.color,
speed: params.speed,
onBefore: function() {
// Insert the contents of the .workData div (hidden from view with display:none)
// into the clicked .workFlip div before the flipping animation starts:
//elt.html($('.workFlip').siblings('.workData').html()); //This Code Will Take only first div workDescription only.
elt.html(elt.find('.workFlip').siblings('.workData').html());
}
}); // End elt.flip
// Setting the flag:
elt.data('flipped', true);
} // End else
}); // End function work
});
</script>
<style type="text/css">
*
{
/* Resetting the default styles of the page */
margin: 0;
padding: 0;
}
body
{
/* Setting default text color, background and a font stack */
font-size: 0.825em;
color: white;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.workList
{
position: relative;
margin: 30px auto;
width: 950px;
}
.work
{
width: 180px;
height: 180px;
float: left;
margin: 5px; /* Giving the work div a relative positioning: */
position: relative;
cursor: pointer;
}
.workFlip
{
/* The work div will be positioned absolutely with respect
to its parent .work div and fill it in entirely */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid #ddd;
background: url("../img/background.jpg") no-repeat center center #f9f9f9;
}
.workFlip:hover
{
border: 1px solid #999; /* CSS3 inset shadow: */
-moz-box-shadow: 0 0 30px #999 inset;
-webkit-box-shadow: 0 0 30px #999 inset;
box-shadow: 0 0 30px #999 inset;
}
.workFlip img
{
/* Centering the logo image in the middle of the workFlip div */
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -70px;
}
.workData
{
/* Hiding the .workData div */
display: none;
}
.workDescription
{
font-size: 11px;
padding: 30px 10px 20px 20px;
font-style: italic;
}
.workURL
{
font-size: 10px;
font-weight: bold;
padding-left: 20px;
}
/* The styles below are only necessary for the styling of the demo page: */
#main
{
position: relative;
margin: 0 auto;
width: 100%;
}
h1
{
padding: 30px 0;
text-align: center;
text-shadow: 0 1px 1px white;
margin-bottom: 30px;
background: url("../img/page_bg.gif") repeat-x bottom #f8f8f8;
}
h1, h2
{
font-family: "Myriad Pro" ,Arial,Helvetica,sans-serif;
}
h2
{
font-size: 14px;
font-weight: normal;
text-align: center;
position: absolute;
right: 40px;
top: 40px;
}
a, a:visited
{
color: #0196e3;
text-decoration: none;
outline: none;
}
a:hover
{
text-decoration: underline;
}
a img
{
border: none;
}
</style>
</head>
<body>
<header></header>
<nav></nav>
<!-- BEGIN CONTENT -->
<div id="main">
<!-- Content of portfolio -->
<div id="workListId" class="workList">
</div>
</div>
<!-- End div id main -->
<!-- END CONTENT -->
<footer></footer>
</body>
</html>
你能创建的jsfiddle。净？ – mplungjan 2012-04-19 12:23:34
好吧，我在这里[链接]（http://jsfiddle.net/AdaKR/） – user1325921 2012-04-19 12:48:48
好吧，我找到了解决方案，但我不能发布答案呢。 但现在，我的颜色参数不再适用于div。 – user1325921 2012-04-19 16:59:47