|
|
显然，效果很实用。对于这个效果，我们并不解释如何去使用效果库，而是讲解如何创建类似的效果，并保持他的可用性，分离式（unobtrusive），可维护性（让未来的维护者，在不需要修改你的脚本的情况下，修改图片，外观或文本标签）。
第一步：分析问题（Analizing the problem）
创建一个好的脚本，第一步应该是去分析哪些是你要完成的：我们想要创建一个照片的幻灯片效果，并且我们想要保持维护的方便。
如何创建一个幻灯片效果
在一个网站上拥有幻灯片有几种方法：
在文档中包含所有的图片。
当他运行在无 JavaScript 状态，这是一个安全的选择。而且，当页面被载完，所有的图片也会将被载完。然而，这个方式只适用于少量的图片。
在文档中包含第一张图片，并且有一个创建幻灯片功能的服务器端脚本。
这也是相当安全的，但是对于终端用户来说，这是非常令人厌烦的——因为我不想加载整个页面，仅想得到下一张照片。但对页面展示和广告点击比较有效，这也是为什么大量的新闻站点使用这个方法。
在文档中包含第一张图片，并按需加载其他图片。
这个方法令你厌烦的是，必须依赖于 JavaScript ，并且要有一个维护照片列表的 JavaScript 数组。你还需提供一个加载指示器，用来显示用户一些正在发生的事情。
在我们的案例中，我们采取下面的图片列表，用向前和向后的按钮把他变成一个幻灯片效果，并且一个指示器告诉我们，照片总数中的哪张照片是当前显示的。
<ul id="slideshow">
<li><img src="img/flat1.jpg" alt="Hallway" /></li>
<li><img src="img/flat2.jpg" alt="Hob" /></li>
<li><img src="img/flat3.jpg" alt="Bathroom" /></li>
<li><img src="img/flat4.jpg" alt="Living Room" /></li>
<li><img src="img/flat5.jpg" alt="Bedroom" /></li>
</ul>
最后的输出会看起来像例子中的幻灯片效果。
依赖关系检查
我们这里有一些元素依赖于 JavaScript 生成：文字指示器和向前和向下的链接。为了保持我们解决方法的可用性，我们需要确保一些事情：
仅当 JavaScript 可用（用户信赖我们提供给他们使用的功能）时，这些元素应该出现。一个链接，不能做任何违反用户对我们的信任的事情。
不论输入设备（让我们不要依赖用户是否有鼠标），交互式元素都应该可用。
图片不应该被隐藏，除非使用者能再次访问他们。在技术上，仅显示第一张图片，且没有向前和向后的链接是预留退路的做法，但是为什么要用户已下载所有的图片仅只看到第一张？
第二步：规划脚本（Planning the Script）
一旦你已经评估了问题，并挑选出你想使用的解决方法，你便可以开始规划脚本。本质上，我们的脚本应该做这些：
检查幻灯片列表是否存在，并且包含一些图片（有理由为一张图片创建一个幻灯片效果吗？）。
隐藏所有的照片，但不是第一个。
创建向前和向后的链接，和一个显示我们在哪的指示器。
添加事件处理程序，使链接增加或减少当前显示的图片编号。
确保幻灯片效果没有超出范围，当图片编号小于 0 ，他应该变为最后一张图片，反过来类似。
不同的功能处理
我们有一些方法处理这个问题。其中之一是使用 DOM 遍历每个 LI 条目并隐藏他。在这个事件监听函数，我们先隐藏先前显示的 LI （如果有的话），并显示当前的这个。
注：显示和隐藏代替图片的 LI 更有意义，因为他允许维护者在每个幻灯片上添加其他的元素，比如，一些标题。
这个方法的问题在于，我们在 JavaScript 中做必要的样式改变，这意味着如果有需要比刚才我们脚本中改变 display 从 block 到 none 更复杂的样式改变，将使脚本变得更杂乱（没有从行为中分离表现）。
样式留给 CSS 解析器
更简洁的方法是将所有的外观改变（在所有列表项下载完之后隐藏某些）都留给浏览器的 CSS 解析器。在我们的例子中，我们可以在幻灯片中使用一个 CSS 规则很容易地隐藏所有的列表项，并用一个特定的 class 重写当前条目的样式。
HTML：
<ul id="slideshow">
<li><img src="img/flat1.jpg" alt="Hallway" /></li>
<li><img src="img/flat2.jpg" alt="Hob" /></li>
<li><img src="img/flat3.jpg" alt="Bathroom" /></li>
<li><img src="img/flat4.jpg" alt="Living Room" /></li>
<li><img src="img/flat5.jpg" alt="Bedroom" /></li>
</ul>
CSS：
#slideshow li{
display:none;
}
#slideshow li.current{
display:block;
}
唯一的问题是，如果我们使 CSS 和 JavaScript 不可用，访客将永远不能访问到其他图片。因此，我们需要仅当 JavaScript 可用时，应用这些样式。技巧是，当 JavaScript 可用，在幻灯片的 UL 上应用 class ，例如名为 js 。这允许我们仅当 JavaScript 可用时，显示效果，通过在 CSS 中简单的修改：
CSS：
#slideshow.js li{
display:none;
}
#slideshow.js li.current{
display:block;
}
这个 class 的钩子（hook）也能被用来对幻灯片的静态和动态版本提供一个完全不同的外观。
我们所有的脚本需要做的是，通过移除或添加 current 的 class 来显示和隐藏当前及以前的照片。
为了确保我们的脚本将不会影响同一页面上的其他脚本，我们将创建一个主要的对象，并在其上构造所有的方法和属性。这可以确保我们的 init() 函数将不会被覆盖或覆盖其他任何相同名字的函数。
JavaScript:
slideshow = {
current:0, // 当前幻灯片编码
init:function(){
// 初始化和设置事件处理函数
},
show:function(e){
// 事件监听器
}
}
第三步、基本的工具方法（ Essential Tools）
现在，我们有了规划和建立我们脚本的框架。是时候思考我们需要完成这个功能的一些工具方法。在其最低要求的情况下，DOM 脚本的帮助库应该包括：
一个注册事件处理函数的方法，我们目前将使用 John Resig 的 addEvent() 方法。
添加和移除 CSS 样式名的方法。
一个覆盖 HTML 元素默认行为的方法。我们不希望出现链接的目标页，而仅是执行脚本。
我们添加这些工具方法到主要的对象上，并准备开始：
JavaScript：
slideshow = {
current:0, // 当前幻灯片编码
init:function(){
// 初始化和设置事件处理函数
},
show:function(e){
// 事件监听器
},
addEvent:function( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){
obj['e'+type+fn]( window.event );
}
obj.attachEvent('on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
},
removeClass:function(o,c){
var rep=o.className.match(' ‘+c)?' ‘+c:c;
o.className=o.className.replace(rep,”);
},
addClass:function(o,c){
var test = new RegExp(”(^|\\s)”+c+”(\\s|$)”).test(o.className);
if(!test){o.className+=o.className?' ‘+c:c;}
},
cancelClick:function(e){
if (window.event){
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.stopPropagation && e.preventDefault){
e.stopPropagation();
e.preventDefault();
}
}
}
当文档完全载完，第一件事情就是需要执行 init() 方法：
123下一页阅读全文 |
|
发表于 2008-6-22 21:59:06
