仿京东商城首页商品分类JS特效，只适用GBK版本的Genuine模板，新手修改，还望海涵

2016-07-07 16:02 来源：www.chinab4c.com 作者：ecshop专家



此代码只循环到3级分类，使用前请先备份library文件夹下的category_tree.lbi，以防万一

QQ截图未命名.jpg

备份完后用代码编辑工具打开category_tree.lbi，用以下代码替换所有源代码。

注意！数据库用户名、密码、数据表等参数请自行填写！

  1. <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  2. <?php
  3. $connect = mysql_connect ( 'localhost', '用户名', '密码' );
  4. mysql_select_db ( '数据库名', $connect );
  5. mysql_query ( "set names 'GBK'" );

  7. $sql = "SELECT * FROM `ecs_category` WHERE `parent_id` =0 ORDER BY `ecs_category`.`sort_order`";

  9. $result = mysql_query ( $sql );


  12. if ($result) {
  13. while ( $all = mysql_fetch_array ( $result ) ) {
  14. $tree_id_one[] = $all['cat_id'];
  15. $tree_name_one[] = $all['cat_name'];
  16. }
  17. }

  19. $num1=count($tree_name_one);

  21. //print_r($tree_name_one);

  23. for($i=0;$i<$num1;$i++){

  25. $sql = "SELECT * FROM `ecs_category` WHERE `parent_id` =$tree_id_one[$i] ORDER BY `ecs_category`.`sort_order`";

  27. $result = mysql_query ( $sql );

  29. if ($result) {
  30. while ( $all = mysql_fetch_array ( $result ) ) {
  31. $tree_id_two[$i][] = $all['cat_id'];
  32. $tree_name_two[$i][] = $all['cat_name'];
  33. }
  34. }

  36. }
  37. //print_r($tree_name_two);


  40. for($i=0;$i<$num1;$i++){

  42. $num=count($tree_name_two[$i]);

  44. for($m=0;$m<$num;$m++){

  46. $sql = "SELECT * FROM `ecs_category` WHERE `parent_id` =".$tree_id_two[$i][$m]." ORDER BY `ecs_category`.`sort_order`";

  48. $result = mysql_query ( $sql );

  50. if ($result) {
  51. while ( $all = mysql_fetch_array ( $result ) ) {
  52. $tree_id_three[$i][$m][] = $all['cat_id'];
  53. $tree_name_three[$i][$m][] = $all['cat_name'];
  54. }
  55. }

  57. }

  59. }
  60. mysql_close($connect);
  61. //print_r($tree_name_three);

  63. ?>
  64. <script>
  65. function change(a){
  66. var div=a.mark-1;
  67. var div="f"+div;
  68. var div2="f"+a.mark;
  69. var vis="v"+a.mark;
  70. if(a.mark=='1'){
  71. document.getElementById(div2).className="change";
  72. document.getElementById(vis).className="vis2";
  73. }
  74. else{
  75. document.getElementById(div).className="fenlei2";
  76. document.getElementById(div2).className="change";
  77. document.getElementById(vis).className="vis2";
  78. }
  79. }
  80. function toback(a){
  81. var div=a.mark-1;
  82. var div="f"+div;
  83. var div2="f"+a.mark;
  84. var vis="v"+a.mark;
  85. if(a.mark=='1'){
  86. document.getElementById(div2).className="fenlei";
  87. document.getElementById(vis).className="vis1";
  88. }
  89. else{
  90. document.getElementById(div).className="fenlei";
  91. document.getElementById(div2).className="fenlei";
  92. document.getElementById(vis).className="vis1";
  93. }
  94. }
  95. </script>
  96. <h1 class="cagegoryTit">{$lang.goods_category}<a href="catalog.php" class="more">{$lang.all_category}</a></h1>
  97. <div class="cagegoryCon clearfix" style="font-size:14px;">
  98. <?

  100. for($i=0;$i<$num1;$i++){

  102. $i2=$i+1;

  104. echo '<div class="fenlei" onmouseover="change(this);" onMouseOut="toback(this);" mark="'.$i2.'" id="f'.$i2.'"><a href="category.php?id='.$tree_id_one[$i].'">'.$tree_name_one[$i]."</a></div>";

  106. }

  108. ?>
  109. </div>

  111. <?

  113. for($i=0;$i<$num1;$i++){

  115. $i2=$i+1;

  117. ?>

  119. <div class="vis1" onmouseover="change(this);" onMouseOut="toback(this);" mark="<?=$i2?>" id="v<?=$i2?>">
  120. <table width="100%" border="0">
  121. <tr>
  122. <td height="400" align="left" valign="top">
  123. <table width="100%" border="0">
  124. <?

  126. $num=count($tree_name_two[$i]);

  128. if($num!=0){

  130. for($m=0;$m<$num;$m++){

  132. ?>
  133. <tr>
  134. <td width="100%" style="padding:5px;">
  135. <table border="0">
  136. <tr>
  137. <td valign="top" width="80"><b><a href="category.php?id=<?=$tree_id_two[$i][$m]?>"><?=$tree_name_two[$i][$m]?></a></td>
  138. <td align="left">
  139. <?

  141. $num2=count($tree_name_three[$i][$m]);

  143. for($n=0;$n<$num2;$n++){

  145. echo '<div class="fenlei_two"> <a href="category.php?id='.$tree_id_three[$i][$m][$n].'">'.$tree_name_three[$i][$m][$n].'</a> |</div>';

  147. }

  149. ?>



  153. </td>
  154. </tr>
  155. </table>
  156. </td>
  157. </tr>

  159. <?
  160. }
  161. }
  162. ?>
  163. </table>

  165. </td>
  166. </tr>
  167. </table>
  168. </div>

  170. <?
  171. }
  172. ?>


  175. <div class="cagegoryBnt blank"></div>
复制代码


打开Genuine模板内的样式文件style.css，将以下css样式插入到最后

  1. .fenlei{
  2. border:none; border-bottom:1px solid #fde6d2; z-index:99; padding:5px; margin-top:5px; background:#ffffff;
  3. }
  4. .fenlei2{
  5. border:none; z-index:99; padding:5px; margin-top:5px; background:#ffffff;
  6. }
  7. .change{
  8. border:1px solid #cc3300; border-right:none; z-index:99; padding:5px; margin-top:5px; position:relative; background:#fef8ef; width:165px;
  9. }
  10. .vis1{
  11. width:475px; border:1px solid #cc3300; background:#fff9ef; position:absolute; margin-top:-400px; margin-left:192px; z-index:98; visibility:hidden; text-align:center;
  12. }
  13. .vis2{
  14. width:475px; border:1px solid #cc3300; background:#fff9ef; position:absolute; margin-top:-400px; margin-left:192px; z-index:98; visibility:visible; text-align:center;
  15. }
  16. .fenlei_two{
  17. white-space:nowrap; float:left;
  18. }
复制代码



以上代码是基于Genuine模板改的，若想适用于其他模板，请自行修改代码。。。

回答：
UTF 版本使用后有乱码。已经修改了上面的 GBK

怎么按照 你的办法修改后 全是问号

能行吗？

UTF 的怎么改？楼主有演示站看下吗？

好东西先记录下

好东西，尝试对比修改下。



哎 非常郁闷

怎么转换成UTF-8的啊？
全是问号，晕

乱码是数据取出的编码不对.

请问放进去 怎么不显示呢

根本不显示.................

用其它的模板，能行吗

在ie6下有效果严重变形，在火狐下没反应。