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); }

3 則留言:

  1. 相關function是在哪邊?寫的有點不太清楚= =

    回覆刪除
  2. 捏,可能要先找一下原版的繼續閱讀的程式碼,再來套用…

    回覆刪除