打印

[原创]用flash+js实现类lightbox

前几天工作任务比较轻松,抽空写了这个。flashbox是一个js+flash的小程序,它可以将页面中指向图片的链接改为在本窗口中用一个浮在前面的层进行展示,效果还是比较华丽的。

这个程序是对lightbox的flash 式实现,相对而言有一些优势:flash的效果有更好的选择;可以处理单文件进度,执行速度比js更快;预加载更强大,可以在后台依次加载所有图片;体积小得多(只需要几k的 flash和js,而lightbox需要的文件仅prototype库就有90k,一共需要3个js和1个css)。当然flash也有它自身的缺点:只有装了flashplayer8才能播放,以及不支持动画gif。不过幸好,flashplayer8的安装率几乎是100%,而大到需要单独展示的动画gif,也是很少存在的。

用过lightbox的朋友可能说这个界面跟它太像了,实际上我非常喜欢lightbox的设计,仿POLA的界面也是我的最爱,没有理由为了刻意避免抄袭而放弃自己喜欢的界面,反正都是做着玩。

点击图片上面的prev next可以翻页,图片超过窗口大小的时候可以拖动,右键菜单可以保存图片和复制地址。

刚开始做,肯定有很多不足之处,热烈欢迎各位砸砖,谢谢~


demo:

http://su27.org/work/flashbox/2.html

主页:

http://su27.org/2007/08/03/flashbox/

用法:

1.下载解压这两个文件:flashbox.js, flashbox.swf,在js的第一行写上swf的地址(最好写绝对地址,如果写相对,要写相对于页面而不是js的地址)。

2.在页面添加
复制内容到剪贴板
代码:
<script src="flashbox.js" type="text/javascript"></script>
3.在任何一个连接到图片的a标签中加上rel=”flashbox”,例如
复制内容到剪贴板
代码:
<a href="thebigpicture.jpg" title="显示的图片" rel="flashbox">点此观看大图</a>
支持的图片类型有jpg,gif,png。

下载:

http://su27.org/work/flashbox/flashbox.zip



更新log:

ver 0.1, 2007.8.3

[ 本帖最后由 su27 于 2007-8-3 12:55 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
Very good!!!
LZ的demo貌似在ie里点过一个链接正常显示后再点其他的就会一直停留在0%了。。。。。。。
ff下正常。。。。。。。。。。。
还有就是图片出来后在渐显效果完成前立即点关闭也关不了


效果还是很炫的,就是太耗资源了

[ 本帖最后由 ATing 于 2007-8-3 13:39 编辑 ]
引用:
原帖由 ATing 于 2007-8-3 13:33 发表
LZ的demo貌似在ie里点过一个链接正常显示后再点其他的就会一直停留在0%了。。。。。。。
ff下正常。。。。。。。。。。。
还有就是图片出来后在渐显效果完成前立即点关闭也关不了


效果还是很炫的,就是 ...
谢谢,我查一下。
不过你遇到的很可能是速度问题,我用的联通机房速度不行。可以多等一下试试。
效果和占用资源肯定是矛盾的,这个平衡也需要不断调整,不行的话就去掉些滤镜,呵呵

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
好东西哦
http://blog.kakee.net

TOP

好东西
但是IE6没看到效果

TOP

好东西,IE和FF都显示正常,收藏,可以提供fla文件学习吗?楼主sunritz@126.com

TOP

效果真的很棒,如果结合ASP上传图片,做成动态的,可以现实吗?
www.iamwing.com

TOP

遨游下测试不行

遨游下测试的时候, 第一次可以单击出来,第二次就0%

TOP

:D :D 很不错啊.
QQ群:18712161

TOP

dddddddddddddd

dddddddddddddddddddddddddddddddd

TOP

效果真的很棒

TOP

嗯,也算是一种创新吧,但是原来lightbox需要的那些js库,css文件在其他地方可能也要调用,而你的这个方案只能用于lightbox。单一功能的话,你这方案才有优势。

TOP