Jen

Slide You Blog Post Use Jqery

想要讓你的文章有滑動的效果嗎?找jQuery就對了,短短幾行code,馬上讓你酷又炫.

step 1. 請先至jQuery官網下載最新版lib, <a href="http://jquery.com/>http://jquery.com/</a>

接著請把下載的jquery-latest.pack.js 上傳到網路空間.

註:您可以使用<a href="http://pages.google.com/>http://pages.google.com/</a>.

step 2. 把以下程式碼加到head段裏頭.

<script src="http://yourid.googlepages.com/jquery-latest.js" type="text/javascript"></script>
<!--src 請使用您的網路空間-->

step 3. 把以下程式碼貼至/body之前

<script type='text/javascript'>
function checkFull(id) {
    $(&quot;#&quot; + id).each(function(i){
      $(&quot;.fullpost&quot;,this).each(function(j){
        $(&quot;#showlink-&quot; + id).attr(&quot;style&quot;,&quot;&quot;);
      });
    });
}
checkFull(&quot;&quot; + &quot;<data:post.id/>&quot;);
function slider(id){
 if ($(&quot;#&quot; + id + &quot; .fullpost&quot;).is(&quot;:hidden&quot;))
 {
  $(&quot;#&quot; + id + &quot; .fullpost&quot;).show(&quot;slow&quot;);
 } else {
  $(&quot;#&quot; + id + &quot; .fullpost&quot;).slideUp();
 }
}
</script> 
step 4.找到<div expr:id='data:post.id'>, 改成如下所示的的html
<style>.fullpost {display:none;}</style>
 <p>
  <div expr:id='data:post.id'>
   <data:post.body/>
  </div>
 </p>
<div style='width:100%;text-align:right;'>
 <span expr:id='&quot;showlink-&quot;+data:post.id' style='display:none;'>
  <p>
   <a expr:onclick='&quot;javascript:slider(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0);'>更多...</a>
   </p>
 </span>
</div>

step 5. 發佈文章時,把要隱藏的文章放至<span class="fullpost"> 想要隱藏的部分 </span>

step 6.測試看看有沒有效果吧,有問題歡迎提問喔.

1 意見:

  TeYoU

2008年5月3日 上午1:51

哇 HOM 大大
好棒好棒
首推!!