为嘉兴打工网风格增加35.cn滑门效果

演示效果: http://www.21jn.net
注意:改动前先备份,备份、备份、备份、备份、备份、备份、备份、备份、备份、备份、备份、备份

1.把下面的js代码保存为单独的js文件.当前例子为21jn.js  .上传至网站目录下的 include/js文件夹中  

(命令不规范,呵呵,有兴趣的朋友再改好了)

1. function setTaba(area,id,menu) {
   
2.         for(j=1; j<=8; j++) {
   
3.                 document.getElementById(menu+j).style.display='none';
   
4.                 document.getElementById(menu+'a'+j).style.display='';
   
5.         }
   
6.                
   
7.        
   
8.     document.getElementById(id).style.display='none';
   
9.         document.getElementById(area).style.display='';
   
10. 
    
11. 
    
12. }

复制代码

注意了：如果你的数据没有8条的话，是看不到效果的，你可以先把j<=8改为实际的数据. 或者增加数据直到有8条

2.在模板index.html.php头部增加引用21jn.js代码

<script src="{S_URL}/include/js/21jn.js" type="text/javascript" language="javascript"></script>

3.现在开始改造滑动门效果了(本想把改动的思路说说，但好像又不知从何说起了,还是先把代码放出来吧！以后再把相关的改动细节写出来）   
   
--------相册改造后的代码--------------------------------------------------

<div id="aaa1" class="tabcontent">

<div id="ppp" class="huadong">
  <ul id="pppttts" class="ttts">
<!--{block name="spaceimage" parameter="order/i.viewnum DESC,i.replynum DESC,i.goodrate DESC/limit/0,1/subjectlen/30/showdetail/1/cachename/image/tpl/data"}--><!--自定义相册调用-->
    <!--{eval $i=1;}-->
        <!--{loop $_SBLOCK['image'] $key $value}-->                                  
    <li id="spaceimage$i" class="div1 div2">
          <div class="xiangxi"><span><strong>$i</strong></span>
          <a href="$value[url]" target="_blank"><img src="$value[image]" alt="$value[subjectall]" /></a >
          <h4><a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></h4>

          创建者:<a href="#uid/$value[uid]#" target="_blank">$value[username]</a>
          <br />上传日期: #date("m-d h:m", $value["dateline"])#
          </div>
    </li>
        <li id="spaceimagea$i" style="display:none" onMouseOver="javascript:setTaba('spaceimage$i','spaceimagea$i','spaceimage')" class="div1">
      <span><strong>$i</strong> <a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></span>
    </li>
        <!--{eval $i++;}-->
    <!--{/loop}-->       
<!--{block name="spaceimage" parameter="order/i.viewnum DESC,i.replynum DESC,i.goodrate DESC/limit/1,7/subjectlen/30/showdetail/1/cachename/image/tpl/data"}--><!--自定义相册调用-->
    <!--{eval $i=2;}-->
        <!--{loop $_SBLOCK['image'] $key $value}-->                                  
    <li id="spaceimage$i" style="display:none" class="div1 div2">
          <div class="xiangxi"><span><strong>$i</strong></span>
          <a href="$value[url]" target="_blank"><img src="$value[image]" alt="$value[subjectall]" /></a >
          <h4><a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></h4>

          创建者:<a href="#uid/$value[uid]#" target="_blank">$value[username]</a>
          <br />上传日期: #date("m-d h:m", $value["dateline"])#
          </div>
    </li>
        <li id="spaceimagea$i" onMouseOver="javascript:setTaba('spaceimage$i','spaceimagea$i','spaceimage')" class="div1">
      <span><strong>$i</strong> <a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></span>
    </li>
        <!--{eval $i++;}-->
    <!--{/loop}-->                                               
  </ul>
</div>
       

</div>

                       
<div id="aaa2" class="tabcontent" style="display: none;">

<div id="ppp" class="huadong">
  <ul id="pppttts" class="ttts">
<!--{block name="spaceimage" parameter="order/i.dateline DESC/limit/0,1/subjectlen/30/showdetail/1/cachename/image/tpl/data"}--><!--自定义最新相册调用-->
    <!--{eval $i=1;}-->
        <!--{loop $_SBLOCK['image'] $key $value}-->                                  
    <li id="spaceimageNew$i" class="div1 div2">
          <div class="xiangxi"><span><strong>$i</strong></span>
          <a href="$value[url]" target="_blank"><img src="$value[image]" alt="$value[subjectall]" /></a >
          <h4><a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></h4>

          创建者:<a href="#uid/$value[uid]#" target="_blank">$value[username]</a>
          <br />上传日期: #date("m-d h:m", $value["dateline"])#
          </div>
    </li>
        <li id="spaceimageNewa$i" style="display:none" onMouseOver="javascript:setTaba('spaceimageNew$i','spaceimageNewa$i','spaceimageNew')" class="div1">
      <span><strong>$i</strong> <a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></span>
    </li>
        <!--{eval $i++;}-->
    <!--{/loop}-->       
                <!--最新图片-->
<!--{block name="spaceimage" parameter="order/i.dateline DESC/limit/1,7/subjectlen/30/showdetail/1/cachename/image/tpl/data"}--><!--自定义最新相册调用-->
        <!--{eval $i=2;}-->
        <!--{loop $_SBLOCK['image'] $key $value}-->                                  
    <li id="spaceimageNew$i" style="display:none" class="div1 div2">
          <div class="xiangxi"><span><strong>$i</strong></span>
          <a href="$value[url]" target="_blank"><img src="$value[image]" alt="$value[subjectall]" /></a >
          <h4><a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></h4>

          创建者:<a href="#uid/$value[uid]#" target="_blank">$value[username]</a>
          <br />上传日期: #date("m-d h:m", $value["dateline"])#
          </div>
    </li>
        <li id="spaceimageNewa$i" onMouseOver="javascript:setTaba('spaceimageNew$i','spaceimageNewa$i','spaceimageNew')" class="div1">
      <span><strong>$i</strong> <a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></span>
    </li>
        <!--{eval $i++;}-->
    <!--{/loop}-->                                                                              
  </ul>
</div>

                        </div>

空间位置改造后的代码

<div id="ddd1" class="tabcontent">
<div id="ppp" class="huadong">
  <ul id="pppttts" class="ttts">
<!--{block name="userspace" parameter="order/u.spaceallnum DESC,u.viewnum DESC/limit/0,1/cachename/group/tpl/data"}--><!--热门空间-头条-->
    <!--{eval $i=1;}-->
   <!--{loop $_SBLOCK['group'] $key $value}-->                                  
    <li id="userspace$i" class="div1 div2">
          <div class="xiangxi"><span><strong>$i</strong></span>
          <a href="$value[url]" target="_blank"><img src="$value[photo]" width="78" height="78" alt="$value[spacename]" /></a>
          <h4><a href="#uid/$value[uid]#" target="_blank">$value[username]</a></h4>
          信息数: $value[spaceallnum]
          <br />创建于 #date("Y-m-d", $value["dateline"])#
          </div>
    </li>
        <li id="userspacea$i" style="display:none" onMouseOver="javascript:setTaba('userspace$i','userspacea$i','userspace')" class="div1">
      <span><strong>$i</strong><a href="#uid/$value[uid]#" target="_blank">$value[spacename]</a></span>
    </li>
        <!--{eval $i++;}-->
    <!--{/loop}-->       
<!--{block name="userspace" parameter="order/u.spaceallnum DESC,u.viewnum DESC/limit/1,7/cachename/group/tpl/data"}--><!--热门空间-->
                <!--{eval $i=2;}-->
   <!--{loop $_SBLOCK['group'] $key $value}-->                                  
    <li id="userspace$i" style="display:none" class="div1 div2">
          <div class="xiangxi"><span><strong>$i</strong></span>
          <a href="$value[url]" target="_blank"><img src="$value[photo]" width="78" height="78" alt="$value[spacename]" /></a>
          <h4><a href="#uid/$value[uid]#" target="_blank">$value[username]</a></h4>
          信息数: $value[spaceallnum]
          <br />创建于 #date("Y-m-d", $value["dateline"])#
          </div>
    </li>
        <li id="userspacea$i" onMouseOver="javascript:setTaba('userspace$i','userspacea$i','userspace')" class="div1">
      <span><strong>$i</strong><a href="#uid/$value[uid]#" target="_blank">$value[spacename]</a></span>
    </li>
        <!--{eval $i++;}-->
    <!--{/loop}-->                                               
  </ul>
</div>

        </div>
        <div id="ddd2" class="tabcontent" style="display: none;">

<div id="ppp" class="huadong">
  <ul id="pppttts" class="ttts">
<!--{block name="userspace" parameter="order/u.dateline DESC/limit/0,1/cachename/group/tpl/data"}--><!--最新空间-头条-->
   <!--{eval $i=1;}-->
   <!--{loop $_SBLOCK['group'] $key $value}-->                                  
    <li id="userspaceNew$i" class="div1 div2">
          <div class="xiangxi"><span><strong>$i</strong></span>
          <a href="$value[url]" target="_blank"><img src="$value[photo]" width="78" height="78" alt="$value[spacename]" /></a>
          <h4><a href="#uid/$value[uid]#" target="_blank">$value[username]</a></h4>
          信息数: $value[spaceallnum]
          <br />创建于 #date("Y-m-d", $value["dateline"])#
          </div>
    </li>
        <li id="userspaceNewa$i" style="display:none" onMouseOver="javascript:setTaba('userspaceNew$i','userspaceNewa$i','userspaceNew')" class="div1">
      <span><strong>$i</strong><a href="#uid/$value[uid]#" target="_blank">$value[spacename]</a></span>
    </li>
        <!--{eval $i++;}-->
    <!--{/loop}-->       
<!--{block name="userspace" parameter="order/u.dateline DESC/limit/1,7/cachename/group/tpl/data"}--><!--最新空间-->
    <!--{eval $i=2;}-->
   <!--{loop $_SBLOCK['group'] $key $value}-->                                  
    <li id="userspaceNew$i" style="display:none" class="div1 div2">
          <div class="xiangxi"><span><strong>$i</strong></span>
          <a href="$value[url]" target="_blank"><img src="$value[photo]" width="78" height="78" alt="$value[spacename]" /></a>
          <h4><a href="#uid/$value[uid]#" target="_blank">$value[username]</a></h4>
          信息数: $value[spaceallnum]
          <br />创建于 #date("Y-m-d", $value["dateline"])#
          </div>
    </li>
        <li id="userspaceNewa$i" onMouseOver="javascript:setTaba('userspaceNew$i','userspaceNewa$i','userspaceNew')" class="div1">
      <span><strong>$i</strong><a href="#uid/$value[uid]#" target="_blank">$value[spacename]</a></span>
    </li>
        <!--{eval $i++;}-->
    <!--{/loop}-->                               
  </ul>
</div>

        </div>
        <div id="ddd3" class="tabcontent" style="display: none;">
<div id="ppp" class="huadong">
  <ul id="pppttts" class="ttts">
<!--{block name="userspace" parameter="order/u.lastpost DESC/limit/0,1/cachename/group/tpl/data"}--><!--最近更新-头条-->
    <!--{eval $i=1;}-->
   <!--{loop $_SBLOCK['group'] $key $value}-->                                  
    <li id="userspaceUpdate$i" class="div1 div2">
          <div class="xiangxi"><span><strong>$i</strong></span>
          <a href="$value[url]" target="_blank"><img src="$value[photo]" width="78" height="78" alt="$value[spacename]" /></a>
          <h4><a href="#uid/$value[uid]#" target="_blank">$value[username]</a></h4>
          信息数: $value[spaceallnum]
          <br />创建于 #date("Y-m-d", $value["dateline"])#
          </div>
    </li>
        <li id="userspaceUpdatea$i" style="display:none" onMouseOver="javascript:setTaba('userspaceUpdate$i','userspaceUpdatea$i','userspaceUpdate')" class="div1">
      <span><strong>$i</strong><a href="#uid/$value[uid]#" target="_blank">$value[spacename]</a></span>
    </li>
        <!--{eval $i++;}-->
    <!--{/loop}-->       
<!--{block name="userspace" parameter="order/u.lastpost DESC/limit/1,7/cachename/group/tpl/data"}--><!--最近更新-->
      <!--{eval $i=2;}-->
   <!--{loop $_SBLOCK['group'] $key $value}-->                                  
    <li id="userspaceUpdate$i"  style="display:none" class="div1 div2">
          <div class="xiangxi"><span><strong>$i</strong></span>
          <a href="$value[url]" target="_blank"><img src="$value[photo]" width="78" height="78" alt="$value[spacename]" /></a>
          <h4><a href="#uid/$value[uid]#" target="_blank">$value[username]</a></h4>
          信息数: $value[spaceallnum]
          <br />创建于 #date("Y-m-d", $value["dateline"])#
          </div>
    </li>
        <li id="userspaceUpdatea$i" onMouseOver="javascript:setTaba('userspaceUpdate$i','userspaceUpdatea$i','userspaceUpdate')" class="div1">
      <span><strong>$i</strong><a href="#uid/$value[uid]#" target="_blank">$value[spacename]</a></span>
    </li>
        <!--{eval $i++;}-->
    <!--{/loop}-->                                       
  </ul>
</div>

        </div>       

[ 本帖最后由 Lzhou 于 2007-11-2 16:56 编辑 ]

其它地方要改的就按下面的示例来改就好了(热门相册示例)
首先看看热门相册原来的代码

<div id="aaa1" class="tabcontent">
<div id="ppp" class="huadong">
  <ul id="pppttts" class="ttts">
<!--{block name="spaceimage" parameter="order/i.viewnum DESC,i.replynum DESC,i.goodrate DESC/limit/0,1/subjectlen/20/showdetail/1/cachename/image/tpl/data"}--><!--自定义相册调用-->
    <!--{loop $_SBLOCK['image'] $key $value}-->      
    <li id="ppp1ttt"  class="div1 div2">
   <div class="xiangxi"><span><strong>1</strong></span>
   <a href="$value[url]" target="_blank"><img src="$value[image]" alt="$value[subjectall]" /></a >
   <h4><a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></h4>
   创建者:<a href="#uid/$value[uid]#" target="_blank">$value[username]</a>
   <br />上传日期: #date("m-d h:m", $value["dateline"])#
   </div>
    </li>
    <!--{/loop}-->
<!--{block name="spaceimage" parameter="order/i.viewnum DESC,i.replynum DESC,i.goodrate DESC/limit/1,7/subjectlen/33/showdetail/1/cachename/image/tpl/data"}--><!--自定义相册调用-->
                <!--{eval $i=2;}-->
                <!--{loop $_SBLOCK['image'] $key $value}-->
    <li id="ppp2ttt"  class="div1">
      <span><strong>$i</strong> <a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></span>
    </li>
                    <!--{eval $i++;}-->
                    <!--{/loop}-->      
  </ul>
</div>
   </div>

第一步改动: 提取部份代码如下

<div id="ppp" class="huadong">
  <ul id="pppttts" class="ttts">
<!--{block name="spaceimage" parameter="order/i.viewnum DESC,i.replynum DESC,i.goodrate DESC/limit/0,1/subjectlen/20/showdetail/1/cachename/image/tpl/data"}--><!--自定义相册调用-->
    <!--{loop $_SBLOCK['image'] $key $value}-->      
    <li id="ppp1ttt"  class="div1 div2">
   <div class="xiangxi"><span><strong>1</strong></span>
   <a href="$value[url]" target="_blank"><img src="$value[image]" alt="$value[subjectall]" /></a >
   <h4><a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></h4>
   创建者:<a href="#uid/$value[uid]#" target="_blank">$value[username]</a>
   <br />上传日期: #date("m-d h:m", $value["dateline"])#
   </div>
    </li>
    <!--{/loop}-->                           
  </ul>
</div>
   </div>

第二步改动,在提取的代码进行修改,增加只显示标题的代码并修改<li>的ID属性
        第一个<li>显示的是有图片的:id="spaceimage$i" ;去掉这个<li> 中的  这行代码
       第二个<li>只显示标题的代码:id="spaceimagea$i" ,注意这个ID不能跟上面的相同,当前的示例多了一个字符a
      之后增加变量 $i , 这样第一步就算是完成了
   

<div id="ppp" class="huadong">
  <ul id="pppttts" class="ttts">
<!--{block name="spaceimage" parameter="order/i.viewnum DESC,i.replynum DESC,i.goodrate DESC/limit/0,1/subjectlen/20/showdetail/1/cachename/image/tpl/data"}--><!--自定义相册调用-->
    <!--{eval $i=1;}-->    <!--增加的 变量 i-->   
    <!--{loop $_SBLOCK['image'] $key $value}-->      
    <li id="spaceimage$i" class="div1 div2"> <!--修改ID属性-->
   <div class="xiangxi"><span><strong>1</strong></span>
   <a href="$value[url]" target="_blank"><img src="$value[image]" alt="$value[subjectall]" /></a >
   <h4><a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></h4>
   创建者:<a href="#uid/$value[uid]#" target="_blank">$value[username]</a>
   <br />上传日期: #date("m-d h:m", $value["dateline"])#
   </div>
    </li>
     <!--增加只显示标题的代码 注意ID属性跟上面的不同,多了一个字符a-->
    <li id="spaceimagea$i" onMouseOver="javascript:setTaba('spaceimage$i','spaceimagea$i','spaceimage')"  style="display:none"  class="div1">
      <span><strong>$i</strong> <a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></span>
    </li>   
<!--{eval $i++;}-->
<!--{/loop}-->                           
  </ul>
</div>

   </div>

第三步,在上面的代码基础上增加代码,细心看下面的代码你会发现增加的代码其实跟第二步的代码基本上没有区别
        就说说不同的地方吧
        1. <!--{eval $i=2;}--> ,i的变量赋值为2了
       2. <li id="spaceimage$i"> 多了 style="display:none" 相反 <li id="spaceimagea$i">少了style="display:none"属性
        3.]<!--{block name="spaceimage" parameter="order/i.viewnum DESC,i.replynum DESC,i.goodrate DESC/limit/1,7/subjectlen/20/showdetail/1/cachename/image/tpl/data"}-->这句代码红色的地方改了
         

<div id="ppp" class="huadong">
  <ul id="pppttts" class="ttts">
<!--{block name="spaceimage" parameter="order/i.viewnum DESC,i.replynum DESC,i.goodrate DESC/limit/0,1/subjectlen/20/showdetail/1/cachename/image/tpl/data"}--><!--自定义相册调用-->
    <!--{eval $i=1;}-->
<!--{loop $_SBLOCK['image'] $key $value}-->      
    <li id="spaceimage$i" class="div1 div2">
   <div class="xiangxi"><span><strong>$i</strong></span>
   <a href="$value[url]" target="_blank"><img src="$value[image]" alt="$value[subjectall]" /></a >
   <h4><a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></h4>
   创建者:<a href="#uid/$value[uid]#" target="_blank">$value[username]</a>
   <br />上传日期: #date("m-d h:m", $value["dateline"])#
   </div>
    </li>
<li id="spaceimagea$i" style="display:none" onMouseOver="javascript:setTaba('spaceimage$i','spaceimagea$i','spaceimage')"  class="div1">
      <span><strong>$i</strong> <a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></span>
    </li>
<!--{eval $i++;}-->
    <!--{/loop}-->
<!--在第二步的基础上增加的代码-->
<!--{block name="spaceimage" parameter="order/i.viewnum DESC,i.replynum DESC,i.goodrate DESC/limit/1,7/subjectlen/20/showdetail/1/cachename/image/tpl/data"}--><!--自定义相册调用-->
    <!--{eval $i=2;}-->
<!--{loop $_SBLOCK['image'] $key $value}-->      
    <li id="spaceimage$i" style="display:none" class="div1 div2">
   <div class="xiangxi"><span><strong>$i</strong></span>
   <a href="$value[url]" target="_blank"><img src="$value[image]" alt="$value[subjectall]" /></a >
   <h4><a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></h4>
   创建者:<a href="#uid/$value[uid]#" target="_blank">$value[username]</a>
   <br />上传日期: #date("m-d h:m", $value["dateline"])#
   </div>
    </li>
<li id="spaceimagea$i" onMouseOver="javascript:setTaba('spaceimage$i','spaceimagea$i','spaceimage')"  class="div1">
      <span><strong>$i</strong> <a href="$value[url]" target="_blank" title="$value[subjectall]">$value[subject]</a></span>
    </li>
<!--{eval $i++;}-->
    <!--{/loop}-->      
  </ul>
</div>
</div>

基本上这样修改就可以了,不过要注意的是<li>的ID属性

[ 本帖最后由 Lzhou 于 2007-12-6 21:17 编辑 ]

提醒下．．请注意一下你的书写行为．．

在ＩＥ６和ＩＥ７
注释
<!------------------------------->
这样写是没关系的，但到了火狐绝对错位
请以后书写规范点
<!--结束-->

这样写．．．

今天不能评分了 明天补上哈哈 我也用上了

原帖由 SSAY 于 2007-11-2 16:07 发表
提醒下．．请注意一下你的书写行为．．

在ＩＥ６和ＩＥ７
注释

这样写是没关系的，但到了火狐绝对错位
请以后书写规范点


这样写．．．

那是我原来的注释代码

SSAY果然是高手

原帖由 SSAY 于 2007-11-2 16:07 发表
提醒下．．请注意一下你的书写行为．．

在ＩＥ６和ＩＥ７
注释

这样写是没关系的，但到了火狐绝对错位
请以后书写规范点


这样写．．．

已经去掉了:)

这个厉害了。。。前天和打工网的哥哥聊天的时候就想告诉他我想做这个。。。没想到。。晚上一看竟然有人比我手快。。。 LZ强哦。。

我把35的搞了过来。。有兴趣的人研究下。。就不贴了。。自己下了看吧。。35.cn原版的