jquery的flip
http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/
js 的3d翻页
参考
http://lab.smashup.it/flip/
js 的3d翻页
<!doctype>
<html>
<head>
<title>Flip! A jQuery plugin v0.9.9</title>
<meta name="description" content="Flip is a jQuery plugin to apply flip animation to any element."/>
<meta name="keywords" content="flip, flipping, jquery, jquery plugin, plugin, animation plugin, javascript, css, border animation"/>
<meta name="language" content="english"/>
<meta name="robots" content="index,follow"/>
<meta name="author" content="Luca Manno"/>
<meta name="charset" content="utf-8"/>
<style>
@font-face {
font-family: 'ChunkFive Regular';
src: url('fonts/Chunkfive.eot');
src: local('ChunkFive Regular'), local('ChunkFive'), url('fonts/Chunkfive.woff') format('woff'), url('fonts/Chunkfive.svg#ChunkFive') format('svg'), url('fonts/Chunkfive.otf') format('opentype');
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body {
background-color: #eaf1f4;
font-size: 67.5%;
font-family: Helvetica, Tahoma, Verdana, sans-serif;
}
a { color: #1e90ff; }
.container {
width: 900px;
margin: 0 auto;
}
.container header {
font-family: 'ChunkFive Regular', Arial, sans-serif;
font-size: 6em;
color: #527699;
margin: 25px 0;
text-shadow: 2px 2px 1px #aabfd4;
}
.container header .subtitle {
font-size: 0.3em;
color: #aabfd4;
height: 100%;
vertical-align: top;
padding-left: 15px;
text-shadow: none;
}
.container header .subtitle .version {
font-size: 0.75em;
font-family: Helvetica, Tahoma, Verdana, sans-serif;
padding-left: 15px;
vertical-align: top;
}
.container header div.aboutMe {
font: 12px/15px Helvetica, Tahoma, Verdana, sans-serif;
text-shadow: 1px 1px 1px #ffffff;
margin-top: 5px;
}
.container article.main {
float: left;
width: 70%;
}
.container article.main p {
font-size: 1.3em;
color: #999999;
margin: 5px 0 20px;
}
.container article.main p pre {
font-family: monospace;
font-size: 15px;
margin: 10px;
display: block;
color: #333333;
}
.container article.main .usage { margin-top: 50px; }
.container aside {
float: right;
width: 25%;
}
.container aside #dependencies { margin-bottom: 25px; }
.container aside #license {
font-size: 1.1em;
color: #666666;
margin-bottom: 25px;
}
.container aside #compat {
font-size: 1.1em;
color: #666666;
margin-bottom: 25px;
}
.container aside #thanksTo {
margin-bottom: 25px;
font-size: 1.1em;
color: #999999;
line-height: 1.5em;
}
.container aside #thanksTo .others { color: #1e90ff; }
.container aside #notes {
color: #999999;
font-size: 0.9em;
line-height: 1.5em;
margin-bottom: 25px;
}
.container footer {
clear: both;
margin: 25px 0;
}
.container h3 {
font-family: 'ChunkFive Regular', Tahoma, Helvetica;
font-size: 2em;
color: #aabfd4;
font-weight: normal;
text-transform: uppercase;
padding-top: 20px;
text-shadow: 1px 1px 1px #ffffff;
}
.container ul.options strong {
font-family: monospace;
font-size: 1.2em;
}
.container li {
list-style: none;
font-size: 1.2em;
margin: 7px 0;
}
.container li strong { display: block; }
#flipbox {
width: 500px;
height: 200px;
line-height: 200px;
background-color: #ff9000;
font-family: 'ChunkFive Regular', Tahoma, Helvetica;
font-size: 2.5em;
color: #ffffff;
text-align: center;
}
#flipPad {
margin: 15px 0;
width: 500px;
text-align: center;
}
#flipPad a {
padding: 5px 15px;
background: #1e90ff;
border: 2px solid #1e90ff;
border-radius: 2px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
font-size: 1em;
font-family: Helvetica, Tahoma, Verdana, sans-serif;
line-height: 30px;
height: 30px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 1px 1px 2px #999999;
-webkit-box-shadow: 1px 1px 2px #999999;
-webkit-transition-duration: 1s;
}
#flipPad a:hover {
background-color: #ff9000;
border: 2px solid #ff9000;
}
#flipPad .revert {
background-color: #ff9000;
border: 2px solid #ff9000;
display: none;
}
.downloadBtn {
display: block;
font-size: 2em;
margin: 0 auto;
padding: 10px 25px;
background: #1e90ff;
color: #ffffff;
text-align: center;
text-decoration: none;
font-family: 'ChunkFive Regular', Tahoma, Helvetica;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-moz-box-shadow: 1px 1px 2px #999999;
-webkit-box-shadow: 1px 1px 2px #999999;
-webkit-transition-duration: 1s;
}
.downloadBtn:hover { background-color: #ff9000; }
.downloadGithub {
display: block;
text-align: right;
margin: 3px 3px 25px 0;
}
.retweet { margin-top: 30px; }
.tweetThis {
position: fixed;
bottom: 0;
right: 5px;
text-decoration: none;
}
.tweetThis span {
display: none;
position: absolute;
right: 32px;
bottom: 32px;
padding: 5px;
background: #ffffff;
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
border: 2px solid #ff9000;
white-space: no-wrap;
}
.tweetThis:hover span { display: block; }
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="/lab/flip/flip_ie.css"/>
<![endif]-->
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script src="jquery.flip.js"></script>
<script type="text/javascript">
$(function(){
$("#flipPad a:not(.revert)").bind("click",function(){
var $this = $(this);
$("#flipbox").flip({
direction: $this.attr("rel"),
color: $this.attr("rev"),
content: $this.attr("title"),//(new Date()).getTime(),
onBefore: function(){$(".revert").show()}
})
return false;
});
$(".revert").bind("click",function(){
$("#flipbox").revertFlip();
return false;
});
});
</script>
</head>
<body>
<div id="flipbox">Hello! I'm a flip-box! :)</div>
<div id="flipPad">
<a href="#" class="left" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!">left</a>
<a href="#" class="top" rel="bt" rev="#B0EB17" title="Ohhh yeah!">top</a>
<a href="#" class="bottom" rel="tb" rev="#82BD2E" title="Hey oh let's go!">bottom</a>
<a href="#" class="right" rel="lr" rev="#C8D97E" title="Waiting for css3...">right</a>
<a href="#" class="revert">revert!</a>
</div>
</body>
</html>
/* * Flip! jQuery Plugin (http://lab.smashup.it/flip/) * @author Luca Manno ([email protected]) [http://i.smashup.it] * [Original idea by Nicola Rizzo (thanks!)] * * @version 0.9.9 [Nov. 2009] * * @changelog * v 0.9.9 -> Fix transparency over non-colored background. Added dontChangeColor option. * Added $clone and $this parameters to on.. callback functions. * Force hexadecimal color values. Made safe for noConflict use. * Some refactoring. [Henrik Hjelte, Jul. 10, 2009] * Added revert options, fixes and improvements on color management. * Released in Nov 2009 * v 0.5 -> Added patch to make it work with Opera (thanks to Peter Siewert), Added callbacks [Feb. 1, 2008] * v 0.4.1 -> Fixed a regression in Chrome and Safari caused by getTransparent [Oct. 1, 2008] * v 0.4 -> Fixed some bugs with transparent color. Now Flip! works on non-white backgrounds | Update: jquery.color.js plugin or jqueryUI still needed :( [Sept. 29, 2008] * v 0.3 -> Now is possibile to define the content after the animation. * (jQuery object or text/html is allowed) [Sept. 25, 2008] * v 0.2 -> Fixed chainability and buggy innertext rendering (xNephilimx thanks!) * v 0.1 -> Starting release [Sept. 11, 2008] * */ (function($) { function int_prop(fx){ fx.elem.style[ fx.prop ] = parseInt(fx.now,10) + fx.unit; } var throwError=function(message) { throw({name:"jquery.flip.js plugin error",message:message}); }; var isIE6orOlder=function() { // User agent sniffing is clearly out of fashion and $.browser will be be deprectad. // Now, I can't think of a way to feature detect that IE6 doesn't show transparent // borders in the correct way. // Until then, this function will do, and be partly political correct, allowing // 0.01 percent of the internet users to tweak with their UserAgent string. // // Not leadingWhiteSpace is to separate IE family from, well who knows? // Maybe some version of Opera? // The second guess behind this is that IE7+ will keep supporting maxHeight in the future. // First guess changed to dean edwards ie sniffing http://dean.edwards.name/weblog/2007/03/sniff/ return (/*@cc_on!@*/false && (typeof document.body.style.maxHeight === "undefined")); }; // Some named colors to work with // From Interface by Stefan Petre // http://interface.eyecon.ro/ var colors = { aqua:[0,255,255], azure:[240,255,255], beige:[245,245,220], black:[0,0,0], blue:[0,0,255], brown:[165,42,42], cyan:[0,255,255], darkblue:[0,0,139], darkcyan:[0,139,139], darkgrey:[169,169,169], darkgreen:[0,100,0], darkkhaki:[189,183,107], darkmagenta:[139,0,139], darkolivegreen:[85,107,47], darkorange:[255,140,0], darkorchid:[153,50,204], darkred:[139,0,0], darksalmon:[233,150,122], darkviolet:[148,0,211], fuchsia:[255,0,255], gold:[255,215,0], green:[0,128,0], indigo:[75,0,130], khaki:[240,230,140], lightblue:[173,216,230], lightcyan:[224,255,255], lightgreen:[144,238,144], lightgrey:[211,211,211], lightpink:[255,182,193], lightyellow:[255,255,224], lime:[0,255,0], magenta:[255,0,255], maroon:[128,0,0], navy:[0,0,128], olive:[128,128,0], orange:[255,165,0], pink:[255,192,203], purple:[128,0,128], violet:[128,0,128], red:[255,0,0], silver:[192,192,192], white:[255,255,255], yellow:[255,255,0], transparent: [255,255,255] }; var acceptHexColor=function(color) { if(color && color.indexOf("#")==-1 && color.indexOf("(")==-1){ return "rgb("+colors[color].toString()+")"; } else { return color; } }; $.extend( $.fx.step, { borderTopWidth : int_prop, borderBottomWidth : int_prop, borderLeftWidth: int_prop, borderRightWidth: int_prop }); $.fn.revertFlip = function(){ return this.each( function(){ var $this = $(this); $this.flip($this.data('flipRevertedSettings')); }); }; $.fn.flip = function(settings){ return this.each( function() { var $this=$(this), flipObj, $clone, dirOption, dirOptions, newContent, ie6=isIE6orOlder(); if($this.data('flipLock')){ return false; } var revertedSettings = { direction: (function(direction){ switch(direction) { case "tb": return "bt"; case "bt": return "tb"; case "lr": return "rl"; case "rl": return "lr"; default: return "bt"; } })(settings.direction), bgColor: acceptHexColor(settings.color) || "#999", color: acceptHexColor(settings.bgColor) || $this.css("background-color"), content: $this.html(), speed: settings.speed || 500, onBefore: settings.onBefore || function(){}, onEnd: settings.onEnd || function(){}, onAnimation: settings.onAnimation || function(){} }; $this .data('flipRevertedSettings',revertedSettings) .data('flipLock',1) .data('flipSettings',revertedSettings); flipObj = { width: $this.width(), height: $this.height(), bgColor: acceptHexColor(settings.bgColor) || $this.css("background-color"), fontSize: $this.css("font-size") || "12px", direction: settings.direction || "tb", toColor: acceptHexColor(settings.color) || "#999", speed: settings.speed || 500, top: $this.offset().top, left: $this.offset().left, target: settings.content || null, transparent: "transparent", dontChangeColor: settings.dontChangeColor || false, onBefore: settings.onBefore || function(){}, onEnd: settings.onEnd || function(){}, onAnimation: settings.onAnimation || function(){} }; // This is the first part of a trick to support // transparent borders using chroma filter for IE6 // The color below is arbitrary, lets just hope it is not used in the animation ie6 && (flipObj.transparent="#123456"); $clone= $this.css("visibility","hidden") .clone(true) .data('flipLock',1) .appendTo("body") .html("") .css({visibility:"visible",position:"absolute",left:flipObj.left,top:flipObj.top,margin:0,zIndex:9999,"-webkit-box-shadow":"0px 0px 0px #000","-moz-box-shadow":"0px 0px 0px #000"}); var defaultStart=function() { return { backgroundColor: flipObj.transparent, fontSize:0, lineHeight:0, borderTopWidth:0, borderLeftWidth:0, borderRightWidth:0, borderBottomWidth:0, borderTopColor:flipObj.transparent, borderBottomColor:flipObj.transparent, borderLeftColor:flipObj.transparent, borderRightColor:flipObj.transparent, background: "none", borderStyle:'solid', height:0, width:0 }; }; var defaultHorizontal=function() { var waist=(flipObj.height/100)*25; var start=defaultStart(); start.width=flipObj.width; return { "start": start, "first": { borderTopWidth: 0, borderLeftWidth: waist, borderRightWidth: waist, borderBottomWidth: 0, borderTopColor: '#999', borderBottomColor: '#999', top: (flipObj.top+(flipObj.height/2)), left: (flipObj.left-waist)}, "second": { borderBottomWidth: 0, borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0, borderTopColor: flipObj.transparent, borderBottomColor: flipObj.transparent, top: flipObj.top, left: flipObj.left} }; }; var defaultVertical=function() { var waist=(flipObj.height/100)*25; var start=defaultStart(); start.height=flipObj.height; return { "start": start, "first": { borderTopWidth: waist, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth: waist, borderLeftColor: '#999', borderRightColor: '#999', top: flipObj.top-waist, left: flipObj.left+(flipObj.width/2)}, "second": { borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth: 0, borderLeftColor: flipObj.transparent, borderRightColor: flipObj.transparent, top: flipObj.top, left: flipObj.left} }; }; dirOptions = { "tb": function () { var d=defaultHorizontal(); d.start.borderTopWidth=flipObj.height; d.start.borderTopColor=flipObj.bgColor; d.second.borderBottomWidth= flipObj.height; d.second.borderBottomColor= flipObj.toColor; return d; }, "bt": function () { var d=defaultHorizontal(); d.start.borderBottomWidth=flipObj.height; d.start.borderBottomColor= flipObj.bgColor; d.second.borderTopWidth= flipObj.height; d.second.borderTopColor= flipObj.toColor; return d; }, "lr": function () { var d=defaultVertical(); d.start.borderLeftWidth=flipObj.width; d.start.borderLeftColor=flipObj.bgColor; d.second.borderRightWidth= flipObj.width; d.second.borderRightColor= flipObj.toColor; return d; }, "rl": function () { var d=defaultVertical(); d.start.borderRightWidth=flipObj.width; d.start.borderRightColor=flipObj.bgColor; d.second.borderLeftWidth= flipObj.width; d.second.borderLeftColor= flipObj.toColor; return d; } }; dirOption=dirOptions[flipObj.direction](); // Second part of IE6 transparency trick. ie6 && (dirOption.start.filter="chroma(color="+flipObj.transparent+")"); newContent = function(){ var target = flipObj.target; return target && target.jquery ? target.html() : target; }; $clone.queue(function(){ flipObj.onBefore($clone,$this); $clone.html('').css(dirOption.start); $clone.dequeue(); }); $clone.animate(dirOption.first,flipObj.speed); $clone.queue(function(){ flipObj.onAnimation($clone,$this); $clone.dequeue(); }); $clone.animate(dirOption.second,flipObj.speed); $clone.queue(function(){ if (!flipObj.dontChangeColor) { $this.css({backgroundColor: flipObj.toColor}); } $this.css({visibility: "visible"}); var nC = newContent(); if(nC){$this.html(nC);} $clone.remove(); flipObj.onEnd($clone,$this); $this.removeData('flipLock'); $clone.dequeue(); }); }); }; })(jQuery);
参考
http://lab.smashup.it/flip/