<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery 3D立体带描述展示 - 网页模板</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="container-narrow">
<div class="row-fluid item-container" id="example1">
<div class="popover left" id="popover1" data-left="60" data-top="150">
<div class="arrow"></div>
<h3 class="popover-title">Customize Position in HTML</h3>
<div class="popover-content">
<p>Short App information. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover right" id="popover2" data-left="580" data-top="150">
<div class="arrow"></div>
<h3 class="popover-title">Auto delay slideshow</h3>
<div class="popover-content">
<p>Move mouse out of this container, and hover the image to puase it. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<button class="btn btn-primary">Open in iTunes</button>
</div>
</div>
<div class="popover right" id="popover3" data-left="580" data-top="220">
<div class="arrow"></div>
<h3 class="popover-title">App Name 3</h3>
<div class="popover-content">
<p>Short App information. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<button class="btn btn-info">Open in iTunes</button>
</div>
</div>
<div class="popover right" id="popover4" data-left="580" data-top="80">
<div class="arrow"></div>
<h3 class="popover-title">App Name 4</h3>
<div class="popover-content">
<p>Short App information. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<button class="btn" disabled="disabled">Coming soon...</button>
</div>
</div>
<div class="popover left" id="popover5" data-left="80" data-top="150">
<div class="arrow"></div>
<h3 class="popover-title">App Name 5</h3>
<div class="popover-content">
<p>Short App information. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<button class="btn" disabled="disabled">Coming soon...</button>
</div>
</div>
<div class="grid-container">
<div class="image-container" data-caption="#popover1"><img src="images/iphone4.png" alt="image" /></div>
<div class="image-container" data-caption="#popover2"><img src="images/iphone4.png" alt="image" /></div>
<div class="image-container" data-caption="#popover3"><img src="images/iphone_lockscreen.png" alt="image" /></div>
<div class="image-container" data-caption="#popover4"><img src="images/iphone_off.png" alt="image" /></div>
<div class="image-container" data-caption="#popover5"><img src="images/iphone4.png" alt="image" /></div>
</div>
</div>
</div> <!-- /container -->
<script src="js/jquery.1.8.3.min.js"></script>
<script src="js/jquery.3dcard.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#example1').Card3D({
columns: 4,
slideshow: true
});
});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery 3D立体带描述展示.zip
版权申诉
26 浏览量
2022-11-19
19:46:35
上传
评论
收藏 1.76MB ZIP 举报
jQuery 3D立体带描述展示.zip （9个子文件） 
jQuery 3D立体带描述展示 jiaoben1374 css 
bootstrap.css 121KB animate.css 71KB style.css 7KB images 
iphone4.png 415KB iphone_off.png 108KB iphone_lockscreen.png 1.24MB
index.html 4KB js jquery.1.8.3.min.js 91KB jquery.3dcard.min.js 3KB资源评论
