关于作者

MagicBox

上一篇 / 下一篇  2008-05-02 21:39:36 / 个人分类:JavaScript

  • 文件大小: 599 KB
  • 文件版本: V1.0
  • 开发商: 来源网络
  • 文件来源: 网络
  • 界面语言: 简体中文
  • 授权方式: 共享
  • 运行平台: IE6,IE7,FireFox2,Opera
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代码,包含了需要的文件,控件自己会在页面加载之后自动初始化,完成所有的工作。

想看一下Demo的话,可以看这里:http://magicboxcn.kingyar.com/,这里也可以下载代码包,另外页面左边显示Demo展示了4张图片,页面中使用了6行html代码。
本地下载

TAG:

 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)