SCLUB/Discuz! 7.2-greenwall风格5页翻页效果代码

9528

安装方法：
1、打开discuz模板找到

1. <!--{if $_DCACHE['forumlinks'][0] || $_DCACHE['forumlinks'][1] || $_DCACHE['forumlinks'][2]}-->

复制代码

2、在上边加

1. <!--我的翻页-->
   
2. <div id="wj-tb" class="wj-chat">
   
3. <ul>$pluginhooks[index_middle]
   
4. <li id="wj-tbm_1" onmouseover="x:HoverLiz(1);" class="wj-tlb-hover1">华语流行 </li>
   
5. <li id="wj-tbm_2" onmouseover="x:HoverLiz(2);" class="wj-tlb-normal1">民歌系列</li>
   
6. <li id="wj-tbm_3" onmouseover="x:HoverLiz(3);" class="wj-tlb-normal1">古典音乐</li>
   
7. <li id="wj-tbm_4" onmouseover="x:HoverLiz(4);" class="wj-tlb-normal1">纯轻音乐</li>
   
8. <li id="wj-tbm_5" onmouseover="x:HoverLiz(5);" class="wj-tlb-normal1">舞曲音乐</li>
   
9. </ul>
   
10. </div>
    
11. 
    
12. <div style="height: 300px;border: solid #DDDDDD;border-width: 1px;border-top: none;background: #fff;border-radius: 5px;margin-bottom: 3px;">
    
13. <div class="wj-tlb-dism" id="wj-tbcm_01">
    
14. <ul style="padding-top: 3px;margin-left: 3px;">
    
15. {eval request('主题列表_科幻片A');}
    
16. </ul>
    
17. </div>
    
18. 
    
19. <div class="wj-tlb-undism" id="wj-tbcm_02">
    
20. <ul style="padding-top: 3px;margin-left: 3px;">
    
21. {eval request('主题列表_战争片B');}
    
22. </ul>
    
23. </div>
    
24. 
    
25. <div class="wj-tlb-undism" id="wj-tbcm_03">
    
26. <ul style="padding-top: 3px;margin-left: 3px;">
    
27. {eval request('主题列表_动作片C');}
    
28. </ul>
    
29. </div>
    
30. 
    
31. <div class="wj-tlb-undism" id="wj-tbcm_04">
    
32. <ul style="padding-top: 3px;margin-left: 3px;">
    
33. {eval request('主题列表_古装片D');}
    
34. </ul>
    
35. </div>
    
36. 
    
37. <div class="wj-tlb-undism" id="wj-tbcm_05">
    
38. <ul style="padding-top: 3px;margin-left: 3px;">
    
39. {eval request('主题列表_喜剧片E');}
    
40. </ul>
    
41. </div>
    
42. </div>
    
43. 
    
44. <script>
    
45. function g(o) {
    
46. return document.getElementById(o);
    
47. }
    
48. function HoverLiz(n) {
    
49. for(var i=1;i<=5;i++) {
    
50. g('wj-tbm_'+i).className='wj-tlb-normal1';
    
51. g('wj-tbcm_0'+i).className='wj-tlb-undism';
    
52. }
    
53. g('wj-tbcm_0'+n).className='wj-tlb-dism';
    
54. g('wj-tbm_'+n).className='wj-tlb-hover1';
    
55. }
    
56. </script><!--我的翻页end-->

复制代码

3、在css_append加

1. .wj-chat {
   
2. background: #fff;
   
3.     line-height: 40px;
   
4.     margin-bottom: -4px;
   
5.     font-size: 12px;
   
6.     border-radius: 5px;
   
7.     background-color: #ecf2f4;
   
8.     overflow: hidden;
   
9. }
   
10. .wj-chat ul {
    
11. height: 32px;
    
12. padding-left: 62px;
    
13. line-height: 32px;
    
14. }
    
15. .wj-chat li {
    
16. float: left;
    
17. text-align: center;
    
18. width: 157px;
    
19. }
    
20. .wj-tlb-hover1 {
    
21. background: #FFF;
    
22. font-weight: 700;
    
23. color: #333;
    
24. display: block;
    
25. margin-top: 1px;
    
26. }
    
27. .wj-tlb-normal1 {
    
28. display: block;
    
29. }
    
30. .wj-tlb-dism { display: block; }
    
31. .wj-tlb-undism { display: none; }
    
32. ul,li { list-style: none; }
    
33. 
    
34. 
    
35. .wj-tlb-dism li {
    
36. float: left;
    
37. white-space: nowrap;
    
38. margin: 0 2px 2px 0;
    
39. text-overflow: ellipsis;
    
40. padding:0px; 0px 0px 0px;
    
41. border: solid #DDDDDD;
    
42. border-width: 1px;
    
43. background-color: #F8F8F8;
    
44. text-align: center;
    
45. overflow: hidden;
    
46. }

复制代码

4、解压下面文件后在后台数据调用导入




5、最后更新缓存！！