之前用 SmoothGallery 和 LightWindow，虽然都不错，但是毕竟一个是mootools的东西，一个是prototype的东西，用起来难免不方便，所以动手用mootools重新实现了一下，风格和特效还是沿用它们的
演示demo地址：http://www.onshowing.net/demo(2009年9月后无效)
对js相册感兴趣的朋友可以看看
对 SmoothGallery 主要做了以下改进：
1. 对浏览器的前进、后退支持，不再依靠hash实现，所以在保留前进、后退的功能时，地址栏是干净的
2. 改进了渲染方式，多图间的切换不再重复渲染多余的层
3. 没有了 SmoothGallery 中的内存泄露问题
对 SmoothGallery 去除了以下功能：
1. 不支持通过html代码创建数据生成相册，而使用既定数组或者通过 ajax 调用返回数据生成相册。其实这更接近实际应用
2. 去除了“相册组”的应用，个人感觉多余
对于 LightWindow，我只沿用了其界面显示效果，及其窗口变换效果，其他的加载 flash，iframe功能通通去掉了
相册的使用方法如下：
<div id="gallery"></div>
window.addEvent('domready', function(){
myGallery = new onshowing.gallery('gallery', {
width: 620,
height: 507,
dataUrl: '/demo/data.html'
});
});
下面贴出部分支持浏览器前进后退功能的源码：
onshowing.historyManager = new Class({
Implements: [Events, Options],
initialize: function(options){
this.setOptions({
/*onStateChanged: $empty,*/
observeDelay: 100
}, options);
this.currentState = 'nothing';
this.frame = new Element('iframe', { width: 0, height: 0, id: 'historyFrame', styles: { display: 'none'}}).inject(document.body);
this.checkTimer = this.checkState.periodical(this.options.observeDelay, this);
},
add: function(title, state){
if(this.currentState == state) return;
this.currentState = state;
try {
var doc = this.frame.contentWindow.document;
doc.open();
doc.write('<html><head><title>' + title + '</title></head><body>' + state + '</body></html>');
doc.close();
} catch(e) {};
},
checkState: function(){
var state = this.frame.contentWindow.document.body.innerHTML;
if(state != this.currentState){
this.currentState = state;
this.fireEvent('stateChanged', state);
}
},
dispose: function(){
$clear(this.checkTimer);
this.removeEvents();
this.frame.dispose();
delete this.frame;
}
});
- demo.rar (725.6 KB)
- 描述: 解压即可运行
- 下载次数: 532
分享到：
- 2008-10-07 00:48
- 浏览 1583
- 评论(7)
- 论坛回复 / 浏览 (6 / 4780)
- 查看更多
相关推荐
本项目“用mootools实现的精美相册效果.zip”就是基于MooTools库来创建一个具有高级视觉体验的相册组件。 首先，让我们深入了解一下MooTools的核心特性。MooTools是一个轻量级的JavaScript框架，它遵循面向对象的...
Mootools支持基于Class的面向对象编程，我们可以创建一个`Album`类来封装所有与相册相关的逻辑。 总结起来，“Mootools Ajax相册实例”涵盖了以下知识点： 1. Mootools库的使用，包括DOM操作、事件处理和Ajax请求...
Mootools 是一个轻量级且功能强大的JavaScript库，它提供了一套优雅的工具集，用于构建高效的Web应用程序。Mootools 的设计目标是提高开发效率，同时保持代码的可维护性和可扩展性。在本文中，我们将深入探讨 ...
MooTools是一个JavaScript库，它的全称是"More Object-Oriented Tools"，寓意提供更多的面向对象的工具。这个库的设计理念是为开发者提供一种优雅、高效的方式来编写可维护的前端代码，它强调代码的组织结构和模块化...
Mootools是一个强大的JavaScript库，它为Web开发者提供了丰富的功能，包括DOM操作、事件处理、动画效果、Ajax交互以及类系统等。这个源码例子展示了如何利用Mootools技术实现一个具有动画效果的导航菜单，这在现代...
- **10g mootools**：可能指的是MooTools的一个特定版本，10g可能代表的是一个时间点或者版本号，表示这个菜单组件是基于某个时期的MooTools开发的。 - **菜单**：这是Mootree的主要功能，即创建和管理菜单，它...
"meteora-0.7.1"可能是基于Mootools的一个Ajax+Json插件集合，用于实现各种实用的交互效果和数据通信功能。这个插件实例集可能包含以下知识点： 1. **Ajax请求**：Mootools提供了一个叫做Request的对象，用于发起...
本文将详细介绍一个基于JSP、MooTools和Flash的多文件无刷新上传组件的实现原理和使用方法。 **一、JSP简介** JSP（JavaServer Pages）是Java平台上的动态网页技术，它允许开发者在HTML代码中嵌入Java代码，实现...
MooTools是一个简洁，模块化，面向对象的JavaScript框架。...总之，Mootools是一个非常优秀的Javascript框架，更多精髓部分等待你去发掘，希望你也能通过学习和使用而喜欢上Mootools，甚至喜欢上Javascript :)
在IT领域，JavaScript库MooTools是一个非常受欢迎的框架，用于增强网页的交互性和功能。MooTools提供了许多工具和组件，其中包括对于tree（树形结构）和table（表格）的处理，使得开发者能够轻松创建复杂的用户界面...
Mootools.js是一个轻量级且功能强大的JavaScript库，它提供了丰富的DOM操作、事件处理、动画效果以及面向对象的编程特性。这款基于Mootools.js的多级折叠菜单，不仅实现了基本的显示/隐藏功能，还加入了平滑过渡的...
对于中文使用者来说，这是一个极好的学习资源，可以系统地学习和掌握MooTools。 学习MooTools，首先要熟悉其基础概念，然后通过实际项目练习来提高技能。CHM文档和PDF手册将提供理论知识，而GIF教程则有助于直观...
标题“mootools做QQ图片查看”涉及到的是一个使用MooTools JavaScript库来实现类似QQ图片查看功能的技术分享。MooTools是一个轻量级、模块化的JavaScript框架，它提供了丰富的DOM操作、事件处理、动画效果等功能，...
MooTools是一款强大的JavaScript库，它提供了一套优雅的面向对象的编程接口和实用的工具集，便于开发者创建高效、可维护的Web应用程序。MooTools 1.4中文PDF手册与MooTools-Core-1.5.1.js是学习和使用MooTools的核心...
标题 "mootools做的评分效果" 指的是使用MooTools JavaScript库实现的一个评分功能。MooTools是一个轻量级、模块化的JavaScript框架，它提供了丰富的工具集，用于简化DOM操作、事件处理、动画效果等。在这个特定的...
MooTools是一个简洁，模块化，面向对象的JavaScript框架。...总之，Mootools是一个非常优秀的Javascript框架，更多精髓部分等待你去发掘，希望你也能通过学习和使用而喜欢上Mootools，甚至喜欢上Javascript :)
MooTools是一个轻量级的JavaScript库，设计思想源自于Prototype，但两者在实现和功能上有许多不同之处。MooTools 1.2是该库的一个稳定版本，它提供了丰富的功能集，包括DOM操作、事件处理、动画效果、Ajax交互等。这...
MooTools 是一个轻量级、模块化的JavaScript库，它为Web开发提供了强大的工具和功能。这个压缩包包含了MooTools的两个主要版本——v1.11和v1.2.1的相关文档，以及可能的HTML和JavaScript文件，帮助开发者理解和使用...
MooTools Mocha UI 是一个基于MooTools JavaScript库的高级用户界面框架，专为Web 2.0时代设计。这个框架的主要目标是提供一种方式，让网页开发者能够创建出具有桌面应用程序般用户体验的交互式网页。MooTools本身是...