一个很简单的淡入淡出相册 （转）
生活随笔
收集整理的這篇文章主要介紹了
一个很简单的淡入淡出相册 （转）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
不知題目是否妥當，總之就是在相冊中使用fade效果，讓圖片切換變得非常自然舒服。
1.<div id="album"> 2.??<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" /> 3.??<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" /> 4.??<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" /> 5.??<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" /> 6.</div><div id="album"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" /> </div>運行代碼
添加樣式，目標是讓所有圖片像疊羅漢一樣摞在一起。
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.}<div id="album"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" /> </div> <style type="text/css"> #album{ position:relative; border:10px solid #000; width:90px; height:120px; overflow:hidden; } #album img{ position:absolute; top:0; left:0; } </style>運行代碼
下面詳細講解一下淡入談出相冊的運作。盡管相冊有許多相片，每次運行都是執行兩張相片的透明度設置。并且當上面一張（我們看到的那張）正準備淡出時，下面那張已淡入得差不多。換言之，我們要想辦法錯開兩張圖片的出場時間。由于淡入淡出（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.}<!doctype html> <html dir="ltr" lang="zh-CN" > <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <title>相冊</title> </head> <body> <div id="album" > <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" /> </div> <style type="text/css"> #album{ position:relative; border:10px solid #000; width:85px; height:120px; overflow:hidden; } #album img{ position:absolute; top:0; left:0; } </style> <script type="text/javascript"> var album = function(el){ var node = (typeof el == "string")? document.getElementById(el):el; var images = node.getElementsByTagName("img"); var length = images.length; for(var i=1;i<length;i++) images[i].opacity = 0;//為所有圖片設置一個自定義屬性opacity images[0].opacity = 0.99; images[0].style.display = "block"; var current = 0; (function(){ setTimeout(function(){ var cOpacity = images[current].opacity, next = images[current+1]?current+1:0;//下一張圖片的索引，如果沒有就回到第一張 var nOpacity = images[next].opacity; cOpacity-=.05; nOpacity+=.05; images[current].opacity = cOpacity; images[next].opacity = nOpacity; images[next].style.display = "block";//確保肯定有一張圖片是可見的 setOpacity(images[current]); setOpacity(images[next]); if(cOpacity<=0) { images[current].style.display = "none"; current = next; setTimeout(arguments.callee,1000); }else{ setTimeout(arguments.callee,50); } },100) })() } var setOpacity =function(obj) { if(obj.opacity>.99) { obj.opacity = .99; } obj.style.opacity = obj.opacity; obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")"; } window.onload = function(){ var el = document.getElementById("album"); album(el); } </script> <p>請稍等4秒………………</p> </body> </html>運行代碼
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.}<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <title>相冊</title> </head> <body> <div id="album" > <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" /> </div> <style type="text/css"> #album{ position:relative; border:10px solid #000; width:85px; height:120px; overflow:hidden; } #album img{ position:absolute; top:0; left:0; } </style> <script type="text/javascript"> var album = function(el){ var node = (typeof el == "string")? document.getElementById(el):el; var images = node.getElementsByTagName("img"); var length = images.length; var current = 0; for(var i=1;i<length;i++){ images[i].opacity = 0;//為所有圖片設置一個自定義屬性opacity images[i].onclick = (function(i){ return function(){ current = i + 1; if(current > 3) current = 3 } })(i); } images[0].opacity = 0.99; (function(){ setTimeout(function(){ var cOpacity = images[current].opacity, next = images[current+1]?current+1:0;//下一張圖片的索引，如果沒有就回到第一張 var nOpacity = images[next].opacity; cOpacity-=.05; nOpacity+=.05; images[current].opacity = cOpacity; images[next].opacity = nOpacity; images[next].style.display = "block";//確保肯定有一張圖片是可見的 setOpacity(images[current]); setOpacity(images[next]); if(cOpacity<=0) { images[current].style.display = "none"; current = next; setTimeout(arguments.callee,1000); }else{ setTimeout(arguments.callee,50); } },100) })() } var setOpacity =function(obj) { if(obj.opacity>.99) { obj.opacity = .99; } obj.style.opacity = obj.opacity; obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")"; } window.onload = function(){ var el = document.getElementById("album"); album(el); } </script> </body> </html>運行代碼
好了本文就到止了，簡單的結構層與表現層注定了行為層不會有多大作為。相冊如果要做得很漂亮，通常需要動用到定義列表與偽類，隨之而來的是幾百行javascript代碼，顯然這與我的題目不符。另，基于時間軸來編寫代碼太考驗人的思維能力，沒有可視化界面嚇跑一堆人，都跑去做Flash了。
總結
以上是生活随笔為你收集整理的一个很简单的淡入淡出相册 （转）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle时间用法
- 下一篇： 使用C#开发ActiveX控件[Obso