分享:MagicBox - 展示一组图片的新控件
最近做了一个新的图片展示控件,用于正在进行的项目,具备如下功能:1. 同时展示多张图片:可以一次展示任意多张图片
2. 可以选择全屏浏览模式 : 普通状态下,控件只占据页面的一小块空间,但用户可以点一个按钮进行全屏浏览,达到影院级的浏览效果,也可以随时推出全屏模式。在任何模式下,操作方式一样,并且图片自动适应浏览窗口大小
3. 多种操作方式:可以使用鼠标,也可以通过键盘操作
3. 更快的显示网页:页面中不含有图片信息,控件分析页面后,异步加载后台图片,所以页面可以更快一点的显示
4. 更容易的使用: 如果要展示10张图片,那么只需要在页面中写12行html代码,10行告诉控件怎么取图片,2行是外层的<div>标签,余下的事全部由控件完成,(包括自动初始化,创建界面,与用户交互)。
我将这个控件命名为MagicBox。
测试:IE6,IE7,FireFox2, Opera
使用:
1. 下载magicbox代码压缩包(里面包含几张较大的演示图片,所以大了一些)
2. 解压缩代码包,得到如下文件:
* magicbox
o css : 包含magicbox.css, 用于页面布局
o image : 包含一些MagicBox需要使用的图片
o js : 包含magicbox.js,是MagicBox脚本文件
o lib : 包含prototype和scriptaculous库文件
另外还有一个测试页面。
3. 在html页面中,包含MagicBox需要的css和javascript文件:
<link rel="Stylesheet" type="text/css" href="magicbox/css/magicbox.css"/>
<script language="javascript" src="magicbox/lib/prototype.js"></script>
<script language="javascript" src="magicbox/lib/effects.js"></script>
<script language="javascript" src="magicbox/lib/utility.js"></script>
<script language="javascript" src="magicbox/js/magicbox.js"></script>
4. 在html页面中,编写类似代码:
<div class="magicbox" width="400" height="300">
<span src="image_1.jpg"/>
<span src="image_2.jpg"/>
...
<span src="image_n.jpg"/>
</div>
只要定义了这样的html代码,包含了需要的文件,控件自己会在页面加载之后自动初始化,完成所有的工作。
由于压缩包中包含了几张较大的演示图片,大小超过500K, 无法在论坛中上传,不过可以看这里: http://magicboxcn.,可以下载代码压缩包,另外页面左边的Demo展示了4张图片,页面中只使用了6行html代码。
感兴趣的朋友可以试一下,如果发现问题,请告诉我,不胜感谢!如果喜欢,你可以将它用于自己的项目,否则请一笑了之。