以下是 360度图片旋转jQuery特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>360度图片旋转jQuery特效</title>
<style type="text/css">
/* 全局样式 */
*{padding:0; margin:0; list-style:none}
.roundabout-holder { margin: 0px auto; width: 850px; height: 496px; }
.roundabout-moveable-item { border-radius: 4px; border: 3px solid rgba(0, 0, 0, 0.08); width: 646px; height: 416px; cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.roundabout-moveable-item img { width: 100%; }
.roundabout-in-focus { border: 3px solid rgba(0, 0, 0, 0.2); }
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<div>
<div class="container">
<ul id="myRoundabout">
<li><img alt="网站建设" src="images/ink0919big1.jpg"></li>
<li><img alt="网页特效" src="images/ink0919big2.jpg"></li>
<li><img alt="网站建设" src="images/ink0919big3.jpg"></li>
<li><img alt="程序员设计师联盟淘宝店" src="images/ink0919big4.jpg"></li>
<li><img alt="13141618.taobao.com" src="images/ink0919big7.jpg"></li>
</ul>
</div>
<script type="text/javascript" src="js/roundabout.js"></script>
<script type="text/javascript" src="js/roundabout_shapes.js"></script>
<script type="text/javascript" src="js/gallery_init.js"></script>
<script type="text/javascript"> Cufon.now(); </script>
</div>
</body>
</html>
JS代码(gallery_init.js):
$(document).ready(function(){
$('#myRoundabout').roundabout({
shape:'figure8',minOpacity:1}
);
}
);
分享到QQ
分享到微博
微信扫一扫
