Carousel加LightBox灯箱效果的3D旋转图片特效
时间:2010-06-24 来源:酷站代码
Carousel and LightBox 2.0是一款3D旋转图片展示特效,支持键盘/鼠标操控方式,支持图片格式和swf文件格式,可通过XML文件对效果进行订制,大图的显示结合了流行的LightBox灯箱效果,颇有创意。
使用教程:
1.在<head>区加入以下代码
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="swfobject.js"></script>
2.在<body>区依次加入以下代码
<script type="text/javascript">
function aclick(anchor_id) {
var a = document.getElementById(anchor_id);
mainLightbox.start(a);
}
</script>
<div style="display: none"> <!-- This is and hidden div --> <a id="anchor1_id" href="photos/01.jpg" rel="lightbox[set1]">a</a> <a id="anchor2_id" href="photos/02.jpg" rel="lightbox[set1]">b</a> <a id="anchor3_id" href="photos/03.jpg" rel="lightbox[set1]">c</a> <a id="anchor4_id" href="photos/04.jpg" rel="lightbox[set1]">d</a> <a id="anchor5_id" href="photos/05.jpg" rel="lightbox[set1]">e</a> <a id="anchor6_id" href="photos/06.jpg" rel="lightbox[set1]">f</a> <a id="anchor7_id" href="photos/07.jpg" rel="lightbox[set1]">g</a> </div>
以上的ID必须跟lightboxedcarousel.xml的ID名称一样,才能开启LightBox效果。
<div class="movie"> <div id="carouseldiv"> <p>This slideshow requires <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player 9.0</a> (or higher). JavaScript must be enabled.</p> </div> </div>
<script type="text/javascript">
swfobject.embedSWF("Carousel.swf", "carouseldiv", "100%", "100%", "9.0.0", false, {xmlfile:"lightboxedcarousel.xml"}, {wmode: "opaque", allowScriptAccess: "always"});
</script>
3.修改lightboxedcarousel.xml文件里头的图片地址。
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
-
HTML
CSS
JavaScript
Dreamweaver
Fireworks
设计分享
-
建站教程
网站运营
实用工具
网页模板
网页素材
- CSS酷站 网上购物 设计团队 设计博客

