奮鬥吧！網頁工程師 2: 繼續閱讀淡入淡出效果 on Blogger

2008年7月30日

繼續閱讀淡入淡出效果 on Blogger

這個效果主要是從 Kaie's Blog 看來的。剛好昨天歐蒐雷米歐問我這個效果，我就順手把這個效果也弄上了我的部落格。

注意
1. 此效果雖然跟 Kaie's Blog 很像，但除了 var fade 的效果啟動變數之外，其他都未參考他的程式碼。
2. 此效果採用了 jQuery 的 javascript Library，如果您已經採用其他 javascript Library 可能會因為衝突而無法正常顯示。
3. 部份語法由 Tony 提供。

步驟一：請先從 jQuery 下載 Download jQuery 1.2.6 (16kb, Minified and Gzipped)。步驟二：將這個檔案傳到您的網頁空間。（googlepage也可以）步驟三：在模板中加入這個 script 的連結。 <script src="http://yourwebsite/jquery-1.2.6.min.js" type="text/javascript"></script> 步驟四：將相關的 function 用下列的 function 取代


/* true 啟用淡入淡出效果，false 取消淡入淡出效果*/
var fade = true;

function showFull(id) {
 var par= $("#"+id);
 $("[id=hidelink]",par).css("display","inline");
 $("[id=showlink]",par).css("display","none");
 $("[id=fullpost]",par).fadeIn('slow');
 $("img",par).fadeIn('slow');
}


function hideFull(id) {

 var post = document.getElementById(id);

 var par= $("#"+id);
 $("[id=hidelink]",par).css("display","none");
 $("[id=showlink]",par).css("display","inline");
 $("[id=fullpost]",par).fadeOut('slow');
 $("img",par).fadeOut('slow');

 post.scrollIntoView(true);
}