一个很简单的淡入淡出相册
2009-09-15 00:00:00 来源：WEB开发网不知题目是否妥当，总之就是在相册中使用fade效果，让图片切换变得非常自然舒服。
1.<div id="album">
2. <img src="http://tech.cncms.com/tech/UploadPic/2010914/2010914135127167.jpg" />
3. <img src="http://tech.cncms.com/tech/UploadPic/2010914/2010914135127920.jpg" />
4. <img src="http://tech.cncms.com/tech/UploadPic/2010914/2010914135127977.jpg" />
5. <img src="http://tech.cncms.com/tech/UploadPic/2010914/2010914135127986.jpg" />
6.</div>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
添加样式，目标是让所有图片像叠罗汉一样摞在一起。
01.#album{
02. position:relative;
03. border:10px solid #000;
04. width:90px;
05. height:120px;
06. overflow:hidden;
07.}
08.#album img{
09. position:absolute;
10. top:0;
11. left:0;
12.}
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
下面详细讲解一下淡入谈出相册的运作。尽管相册有许多相片，每次运行都是执行两张相片的透明度设置。并且当上面一张（我们看到的那张）正准备淡出时，下面那张已淡入得差不多。换言之，我们要想办法错开两张图片的出场时间。由于淡入淡出（fade）其实是透明特效加display的切换，如何取得 opacity样式值呢？要知道，设置样式与获取样式，完全不是一回事。获取样式远比设置样式复杂，如果不是内联样式，在IE中就要调用 currentStyle加遍历父级元素。一个取巧的办法，就是不要在获取opacity中下工夫，直接设置一个自定义属性opacity（非 style.opacity），每次执行透明度设置时用这个opacity赋值，并每次一点点改变这个opacity的值。正在淡出的图片对象的 opacity呈递减状态，反之亦然。
01.var album = function(el){
02. var node = (typeof el == "string")? document.getElementById(el):el;
03. var images = node.getElementsByTagName("img");
04. var length = images.length;
05. for(var i=1;i<length;i++) images[i].opacity = 0;//为所有图片设置一个自定义属性opacity
06. images[0].opacity = 0.99;
07. var current = 0;
08. (function(){
09. setTimeout(function(){
10. var cOpacity = images[current].opacity,
11. next = images[current+1]?current+1:0;//下一张图片的索引，如果没有就回到第一张
12. var nOpacity = images[next].opacity;
13. cOpacity-=.05;
14. nOpacity+=.05;
15. images[current].opacity = cOpacity;
16. images[next].opacity = nOpacity;
17. images[next].style.display = "block";//确保肯定有一张图片是可见的
18. setOpacity(images[current]);
19. setOpacity(images[next]);
20. if(cOpacity<=0) {
21. images[current].style.display = "none";
22. current = next;
23. setTimeout(arguments.callee,1000);
24. }else{
25. setTimeout(arguments.callee,50);
26. }
27. },100)
28. })()
29.}
30.var setOpacity =function(obj) {
31. if(obj.opacity>.99) {
32. obj.opacity = .99;
33. }
34. obj.style.opacity = obj.opacity;
35. obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")";
36.}
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
ablum函数中的闭包相当于：
01.var repeat = function(){
02. setTimeout(function(){
03. //*************略*************
04. if(cOpacity<=0) {
05. images[current].style.display = "none";
06. current = next;
07. setTimeout(repeat,1000);
08. }else{
09. setTimeout(repeat,50);
10. }
11. },100)
12. repeat();
闭包让我们少写许多东西，程序变得更紧凑。我们甚至可以搞个点击停顿效果，不过说实话，只是个假象而已，只能让它多停留两秒。你多点击几下，这张图片就静止久一点。我可不想点击一下整个相册就不动了。
01.var album = function(el){
02. var node = (typeof el == "string")? document.getElementById(el):el;
03. var images = node.getElementsByTagName("img");
04. var length = images.length;
05. var current = 0;
06. for(var i=1;i<length;i++){
07. images[i].opacity = 0;//为所有图片设置一个自定义属性opacity
08. images[i].onclick = (function(i){//点击停顿效果
09. return function(){
10. current = i + 1;
11. if(current > 3)
12. current = 3
13. }
14. })(i);
15. }
16. images[0].opacity = 0.99;
17. (function(){
18. setTimeout(function(){
19. var cOpacity = images[current].opacity,
20. next = images[current+1]?current+1:0;//下一张图片的索引，如果没有就回到第一张
21. var nOpacity = images[next].opacity;
22. cOpacity-=.05;
23. nOpacity+=.05;
24. images[current].opacity = cOpacity;
25. images[next].opacity = nOpacity;
26. images[next].style.display = "block";//确保肯定有一张图片是可见的
27. setOpacity(images[current]);
28. setOpacity(images[next]);
29. if(cOpacity<=0) {
30. images[current].style.display = "none";
31. current = next;
32. setTimeout(arguments.callee,1000);
33. }else{
34. setTimeout(arguments.callee,50);
35. }
36. },100)
37. })()
38.}
39.var setOpacity =function(obj) {
40. if(obj.opacity>.99) {
41. obj.opacity = .99;
42. }
43. obj.style.opacity = obj.opacity;
44. obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")";
45.}
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
好了本文就到止了，简单的结构层与表现层注定了行为层不会有多大作为。相册如果要做得很漂亮，通常需要动用到定义列表与伪类，随之而来的是几百行 javascript代码，显然这与我的题目不符。另，基于时间轴来编写代码太考验人的思维能力，没有可视化界面吓跑一堆人，都跑去做Flash了。
中查找“一个很简单的淡入淡出相册”更多相关内容
中查找“一个很简单的淡入淡出相册”更多相关内容更多精彩
赞助商链接
