当前访客身份：游客 [
当前位置：
发布于 日 14时,
根据网上有一篇介绍了如何在fancyBox现在有的功能的基础上添加旋转图片的功能,但是只有代码片段,本地改完了发现可用,上传已经修改好的版本,只包含了4个修改的文件.&附上我找到的相关博文链接:&/blog/2119885&(不知道是不是原创).
代码片段(3)
fancybox.zip&~&13KB&&&&
2.&[图片] 1.png&&&&
3.&[图片] 2.png&&&&
开源中国-程序员在线工具：
相关的代码(2712)
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
demo图片的脸看着好渗人o(╯□╰)o
2楼：小工Q 发表于
我是用HTML5做MacOS桌面App的，有兴趣，交流一下。
开源从代码分享开始
lala_的其他代码1728人阅读
fancybox&v1.3.4
不同的动画演示
标题不同位置演示
图像画廊(支持鼠标控制播放)
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&jquery特效插件FancyBox弹出层演示&/title&
&script type=&text/javascript& src=&/skin/js/jquery.js&&&/script&
&script type=&text/javascript& src=&js/jquery.fancybox-1.3.4.js&&&/script&
&!--鼠标控制滚动--&
&script type=&text/javascript& src=&js/jquery.mousewheel-3.0.4.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&css/jquery.fancybox-1.3.4.css& media=&screen& /&
&style type=&text/css&&
*{margin:0;padding:0;list-style-type:}
body{font:normal 12px/18px Verdana, sans-}
#content{width:410margin:40px auto 0padding:0 60px 30px 60border:solid 1px #background:#-moz-box-shadow:0px 0px 10px #-webkit-box-shadow:0px 0px 10px #}
hr{border:height:1line-height:1background:#E5E5E5;margin-bottom:20padding:0;}
#content p{margin:0;padding:7px 0;}
#content a img{border:1px solid #BBB;padding:2margin:10px 20px 10px 0;vertical-align:}
#content a img.last{margin-right:0;}
#content ul{margin-bottom:24padding-left:30}
&script type=&text/javascript&&
&& &$(document).ready(function() {
&& &&& &$(&a#example1&).fancybox();
&& &&& &$(&a#example2&).fancybox({
&& &&& &&& &'overlayShow':false,
&& &&& &&& &'transitionIn':'elastic',
&& &&& &&& &'transitionOut':'elastic'
&& &&& &});
&& &&& &$(&a#example3&).fancybox({
&& &&& &&& &'transitionIn':'none',
&& &&& &&& &'transitionOut':'none'&& &
&& &&& &});
&& &&& &$(&a#example4&).fancybox({
&& &&& &&& &'opacity':true,
&& &&& &&& &'overlayShow':false,
&& &&& &&& &'transitionIn':'elastic',
&& &&& &&& &'transitionOut':'none'
&& &&& &});
&& &&& &$(&a#example5&).fancybox();
&& &&& &$(&a#example6&).fancybox({
&& &&& &&& &'titlePosition':'outside',
&& &&& &&& &'overlayColor':'#000',
&& &&& &&& &'overlayOpacity':0.9
&& &&& &});
&& &&& &$(&a#example7&).fancybox({
&& &&& &&& &'titlePosition':'inside'
&& &&& &});
&& &&& &$(&a#example8&).fancybox({
&& &&& &&& &'titlePosition':'over'
&& &&& &});
&& &&& &$(&a[rel=example_group]&).fancybox({
&& &&& &&& &'transitionIn':'none',
&& &&& &&& &'transitionOut':'none',
&& &&& &&& &'titlePosition':'over',
&& &&& &&& &'titleFormat':function(title, currentArray, currentIndex, currentOpts) {
&& &&& &&& &&& &return '&span id=&fancybox-title-over&&Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' & ' + title : '') + '&/span&';
&& &&& &&& &}
&& &&& &});
&& &&& &$(&#various1&).fancybox({
&& &&& &&& &'titlePosition':'inside',
&& &&& &&& &'transitionIn':'none',
&& &&& &&& &'transitionOut':'none'
&& &&& &});
&& &&& &$(&#various2&).fancybox();
&& &&& &$(&#various3&).fancybox({
&& &&& &&& &'width':'75%',
&& &&& &&& &'height':'75%',
&& &&& &&& &'autoScale':false,
&& &&& &&& &'transitionIn':'none',
&& &&& &&& &'transitionOut':'none',
&& &&& &&& &'type':'iframe'
&& &&& &});
&& &&& &$(&#various4&).fancybox({
&& &&& &&& &'padding':0,
&& &&& &&& &'autoScale':false,
&& &&& &&& &'transitionIn':'none',
&& &&& &&& &'transitionOut':'none'
&& &&& &});
&& &&div id=&content&&
&& &&& &&h2&fancybox &span&v1.3.4&/span&&/h2&
&& &&& &&hr /&
&& &&& &&p&不同的动画演示&/p&
&& &&& &&p&
&& &&& &&& &&a id=&example1& href=&example/1_b.jpg&&&img alt=&example1& src=&example/1_s.jpg& /&&/a&
&& &&& &&& &&a id=&example2& href=&example/2_b.jpg&&&img alt=&example2& src=&example/2_s.jpg& /&&/a&
&& &&& &&& &&a id=&example3& href=&example/3_b.jpg&&&img alt=&example3& src=&example/3_s.jpg& /&&/a&
&& &&& &&& &&a id=&example4& href=&example/4_b.jpg&&&img class=&last& alt=&example4& src=&example/4_s.jpg& /&&/a&
&& &&& &&/p&
&& &&& &&p&标题不同位置演示&/p&
&& &&& &&p&
&& &&& &&& &&a id=&example5& href=&example/5_b.jpg& title=&Lorem ipsum dolor sit amet, consectetur adipiscing elit.&&&img alt=&example4& src=&example/5_s.jpg& /&&/a&
&& &&& &&& &&a id=&example6& href=&example/6_b.jpg& title=&Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet.&&&img alt=&example5& src=&example/6_s.jpg&
&& &&& &&& &&a id=&example7& href=&example/7_b.jpg& title=&Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis.&&&img alt=&example6& src=&example/7_s.jpg& /&&/a&
&& &&& &&& &&a id=&example8& href=&example/8_b.jpg& title=&Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat
diam eu consectetur.&&&img class=&last& alt=&example7& src=&example/8_s.jpg& /&&/a&
&& &&& &&/p&
&& &&& &&p&图像画廊(支持鼠标控制播放)&/p&
&& &&& &&p&
&& &&& &&& &&a rel=&example_group& href=&example/9_b.jpg& title=&Lorem ipsum dolor sit amet&&&img alt=&& src=&example/9_s.jpg& /&&/a&
&& &&& &&& &&a rel=&example_group& href=&example/10_b.jpg& title=&&&&img alt=&& src=&example/10_s.jpg& /&&/a&
&& &&& &&& &&a rel=&example_group& href=&example/11_b.jpg& title=&&&&img alt=&& src=&example/11_s.jpg& /&&/a&
&& &&& &&& &&a rel=&example_group& href=&example/12_b.jpg& title=&&&&img class=&last& alt=&& src=&example/12_s.jpg& /&&/a&
&& &&& &&/p&
&& &&& &&p&各种实例&/p&
&& &&& &&ul&
&& &&& &&& &&li&&a id=&various1& href=&#inline1& title=&Lorem ipsum dolor sit amet&&内容弹出层&/a&&/li&
&& &&& &&& &&li&&a id=&various2& href=&ajax.txt&&Ajax内容弹出层&/a&&/li&
&& &&& &&& &&li&&a id=&various3& href=&http://google.ca&&Iframe内容弹出层&/a&&/li&
&& &&& &&& &&li&&a id=&various4& href=&/jp/events/cs3_web_edition_tour/swfs/perform.swf&&flash SWF文件弹出层&/a&&/li&
&& &&& &&/ul&
&& &&& &&div style=&display:&&
&& &&& &&& &&div id=&inline1& style=&width:400height:100overflow:&&
&& &&& &&& &Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus
eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed
&& &&& &&& &&/div&
&& &&& &&/div&
&& &&& &&p&Ajax弹出层演示,需要从服务器运行。&/p&&& &
&& &&/div&
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：284931次
积分：4962
积分：4962
排名：第2757名
原创：193篇
转载：189篇
评论：32条
(1)(1)(1)(3)(6)(4)(3)(9)(10)(1)(3)(14)(18)(23)(20)(39)(50)(1)(22)(13)(8)(21)(2)(28)(3)(17)(12)(10)(31)(1)(6)(1)正在读取中...
正在读取中...
正在读取中...
优秀的jquery弹出层效果插件 - Fancybox
所属栏目：　时间：　来源：　作者：
正在读取中...
Fancybox是一款优秀的弹出层效果jquery插件，它能够展示丰富的弹出层效果。前面我们有文章介绍了facybox弹出层效果，相比facybox，fancybox显得功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。fancybox具有以下特性：可以加载DIV、图片、图片集、Ajax数据、SWF影片，iframe页面等。支持键盘方向键和ESC键。丰富的参数设置和方法调用。可扩展性强。如何使用？本文以DEMO中的Demo2为例，讲解fancybox的使用。1、添加javascript引用和css文件的引用&link&rel=&stylesheet&&type=&text/css&&href=&fancybox.css&&/&&
&script&type=&text/javascript&&src=&js/jquery.js&&&/script&&
&script&type=&text/javascript&&src=&js/fancybox.js&&&/script&2、HTML&h4&图片集，支持键盘方向键&/h4&&
&&&&a&rel=&group&&href=&images/b1.jpg&&title=&图片标题&&&img&alt=&&&src=&images/s1.gif&&/&&/a&&
&&&&a&rel=&group&&href=&images/b2.jpg&&title=&图片标题&&&img&alt=&&&src=&images/s2.gif&&/&&/a&&
&&&&a&rel=&group&&href=&images/b3.jpg&&title=&蓝天白云绿草&&&img&alt=&&&src=&images/s3.gif&&/&&/a&&
&/p&3、调用fancybox$(function(){&
&&&&$(&a[rel=group]&).fancybox({&
&&&&&&&&'titlePosition'&:&'over',&
&&&&&&&&'cyclic'&&&&&&&&:&true,&
&&&&&&&&'titleFormat'&&&&:&function(title,&currentArray,&currentIndex,&currentOpts)&{&
&&&&&&&&&&&&&&&&&&&&return&'&span&id=&fancybox-title-over&&'&+&(currentIndex&+&1)&+&
&'&/&'&+&currentArray.length&+&(title.length&?&'&&&'&+&title&:&'')&+&'&/span&';&
&&&&&&&&&&&&&&&&}&
});注意，fancybox的参数设置格式为：'key':'value'。titlePosition:设置图片标题的显示位置为图片上。cyclic：设置图片浏览方式为循环浏览。titleFormat：设置图片标题的格式，可以显示图片总数和当前图片顺序。fancybox插件主要参数和方法一览表参数/方法描述默认值基本width设置弹出串口的宽度，当内容为swf,iframe或者单行文字时，应该将'autoDimensions' 设置为false560height设置弹出串口的高度，当内容为swf,iframe或者单行文字时，应该将'autoDimensions' 设置为false340cyclic是否循环显示，当内容为图片集时。falsecenterOnScroll弹出窗口始终浏览器居中。falsemodal是否使用模式窗口。当设置为true时，应该同时将：'hideOnOverlayClick'，'hideOnContentClick'，'enableEscapeButton'， 'showCloseButton' 设置为false，并将'overlayShow' 设置为truefalsetitlePosition标题的位置,可以设置为'outside', 'inside' or 'over''outside'transitionIn, transitionOut窗口显示的方式，可以设置为'elastic', 'fade' or 'none''fade'send方法，向服务端发送裁剪图片的数据，以便服务端接收参数进行处理，e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });方法$.fancybox.showActivity显示加载动画$.fancybox.hideActivity隐藏加载动画$.fancybox.close关闭窗口$.fancybox.resize自动调整窗口的高度使之与内容相适应Centered是否将选区居中，即显示在容器的中心。具体效果请看演示，一流资源网推荐下载。
请站长喝杯咖啡？
站长一直坚持白天工作、晚上熬夜更新素材，付出了巨大的精力和时间，其中的辛酸难以言述。坚持免积分、免登录、无任何限制下载！如果本站素材对你有用，不妨考虑请站长喝杯咖啡鼓励一下！
条评论给个评价吧
正在读取中...
下载最多的
1378次下载
正在读取中...
最近更新的
2014全新改版上线
2013全新改版上线