| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1948 人关注过本帖
标题:分享:MagicBox - 展示一组图片的新控件
只看楼主 加入收藏
kingyar
Rank: 1
等 级:新手上路
帖 子:19
专家分:0
注 册:2008-4-26
收藏
 问题点数:0 回复次数:2 
分享: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代码。

感兴趣的朋友可以试一下,如果发现问题,请告诉我,不胜感谢!如果喜欢,你可以将它用于自己的项目,否则请一笑了之。
搜索更多相关主题的帖子: 控件 MagicBox 鼠标 展示 网页 
2008-04-30 13:04
zslj
Rank: 1
等 级:新手上路
帖 子:34
专家分:0
注 册:2008-4-28
收藏
得分:0 
效果不错。
2008-05-03 04:40
kingyar
Rank: 1
等 级:新手上路
帖 子:19
专家分:0
注 册:2008-4-26
收藏
得分:0 
感谢版主加为精华和楼上朋友的好评。

这个东西是借助prototype做的,特效部分是通过script.aculo.us实现的,prototype和script.aculo.us是两个功能非常强大的javascript库,在国外用的非常广泛,但在国内似乎用的人不多。我想大概是因为缺少相关资料的缘故。在学习它们的过程中,我整理和翻译了比较系统完整的教程,放在这里:http://web., 有兴趣的朋友可以看一下,相信你不会空手而归。
2008-05-04 17:28
快速回复:分享:MagicBox - 展示一组图片的新控件
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.097131 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved