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 (luca@smashup.it) [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/
扫一扫
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
