<!DOCTYPE html>
<html lang="zh" class="demo1 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<title>五种jQuery卡片翻转特效 | jQuery特效|手机微信网站特效| 脚本之家</title>
<meta name="keywords" content="SVG特效, 手机微信网站特效, css3动画, html5特效, 网页特效" />
<meta name="description" content="脚本之家-专注于HTML5、CSS3、js、jQuery、手机移动端等网页特效的手机与分享。脚本之家始终坚持:无会员、无积分、无限制的“三无原则”,所有的资源都免费提供广大童鞋下载学习和使用。" />
<!-- Edit Below -->
<script src="http://www.5iweb.com.cn/statics/js/jquery.1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flipout_cards.js"></script>
<link rel="stylesheet" type="text/css" href="css/flipout_cards.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/elusive-webfont.css" />
<script src="js/modernizr.js"></script>
</head>
<body class="demo1">
<div class="header">
<h1>五种jQuery卡片翻转特效</h1>
<div class="menu">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a class="active" href="index5.html">Demo 5</a>
</div>
</div>
<div class="main">
<div class="page_container">
<div class="flipout">
<div class="foc-main">
<p>22°C</p>
<small>It's Pretty Hot</small>
<small>Hover to see more</small>
</div>
<div class="foc-left">
<p>40°C</p>
<small>Tomorrow is even worse.</small>
</div>
<div class="foc-left">
<p>46°C</p>
<small>The next is even worse.</small>
</div>
<div class="foc-right">
<p>46°C</p>
<small>The next is even worse.</small>
</div>
<div class="foc-right">
<p>50°C</p>
<small>Don't go out.</small>
</div>
<div class="foc-bottom">
<p>50°C</p>
<small>Don't go out.</small>
</div>
<div class="foc-bottom">
<p>50°C</p>
<small>Don't go out.</small>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$(".flipout").flipout_cards({
animation: "foldOut"
});
});
</script>
</body>
</html>