仿京东商城首页商品分类JS特效，只适用GBK版本的Genuine模板，新手修改，还望海涵
[i=s] 本帖最后由 phenixsoul 于 2010-8-31 10:27 编辑 [/i]此代码只循环到3级分类，使用前请先备份library文件夹下的category_tree.lbi，以防万一
[attach]39905[/attach]
备份完后用代码编辑工具打开category_tree.lbi，用以下代码替换所有源代码。
注意！数据库用户名、密码、数据表等参数请自行填写！
[code]<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<?php
$connect = mysql_connect ( 'localhost', '用户名', '密码' );
mysql_select_db ( '数据库名', $connect );
mysql_query ( "set names 'GBK'" );
$sql = "SELECT * FROM `ecs_category` WHERE `parent_id` =0 ORDER BY `ecs_category`.`sort_order`";
$result = mysql_query ( $sql );
if ($result) {
while ( $all = mysql_fetch_array ( $result ) ) {
$tree_id_one[] = $all['cat_id'];
$tree_name_one[] = $all['cat_name'];
}
}
$num1=count($tree_name_one);
//print_r($tree_name_one);
for($i=0;$i<$num1;$i++){
$sql = "SELECT * FROM `ecs_category` WHERE `parent_id` =$tree_id_one[$i] ORDER BY `ecs_category`.`sort_order`";
$result = mysql_query ( $sql );
if ($result) {
while ( $all = mysql_fetch_array ( $result ) ) {
$tree_id_two[$i][] = $all['cat_id'];
$tree_name_two[$i][] = $all['cat_name'];
}
}
}
//print_r($tree_name_two);
for($i=0;$i<$num1;$i++){
$num=count($tree_name_two[$i]);
for($m=0;$m<$num;$m++){
$sql = "SELECT * FROM `ecs_category` WHERE `parent_id` =".$tree_id_two[$i][$m]." ORDER BY `ecs_category`.`sort_order`";
$result = mysql_query ( $sql );
if ($result) {
while ( $all = mysql_fetch_array ( $result ) ) {
$tree_id_three[$i][$m][] = $all['cat_id'];
$tree_name_three[$i][$m][] = $all['cat_name'];
}
}
}
}
mysql_close($connect);
//print_r($tree_name_three);
?>
<script>
function change(a){
var div=a.mark-1;
var div="f"+div;
var div2="f"+a.mark;
var vis="v"+a.mark;
if(a.mark=='1'){
document.getElementById(div2).className="change";
document.getElementById(vis).className="vis2";
}
else{
document.getElementById(div).className="fenlei2";
document.getElementById(div2).className="change";
document.getElementById(vis).className="vis2";
}
}
function toback(a){
var div=a.mark-1;
var div="f"+div;
var div2="f"+a.mark;
var vis="v"+a.mark;
if(a.mark=='1'){
document.getElementById(div2).className="fenlei";
document.getElementById(vis).className="vis1";
}
else{
document.getElementById(div).className="fenlei";
document.getElementById(div2).className="fenlei";
document.getElementById(vis).className="vis1";
}
}
</script>
<h1 class="cagegoryTit">{$lang.goods_category}<a href="catalog.php" class="more">{$lang.all_category}</a></h1>
<div class="cagegoryCon clearfix" style="font-size:14px;">
<?
for($i=0;$i<$num1;$i++){
$i2=$i+1;
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>";
}
?>
</div>
<?
for($i=0;$i<$num1;$i++){
$i2=$i+1;
?>
<div class="vis1" onmouseover="change(this);" onMouseOut="toback(this);" mark="<?=$i2?>" id="v<?=$i2?>">
<table width="100%" border="0">
<tr>
<td height="400" align="left" valign="top">
<table width="100%" border="0">
<?
$num=count($tree_name_two[$i]);
if($num!=0){
for($m=0;$m<$num;$m++){
?>
<tr>
<td width="100%" style="padding:5px;">
<table border="0">
<tr>
<td valign="top" width="80"><b><a href="category.php?id=<?=$tree_id_two[$i][$m]?>"><?=$tree_name_two[$i][$m]?></a></td>
<td align="left">
<?
$num2=count($tree_name_three[$i][$m]);
for($n=0;$n<$num2;$n++){
echo '<div class="fenlei_two"> <a href="category.php?id='.$tree_id_three[$i][$m][$n].'">'.$tree_name_three[$i][$m][$n].'</a> |</div>';
}
?>
</td>
</tr>
</table>
</td>
</tr>
<?
}
}
?>
</table>
</td>
</tr>
</table>
</div>
<?
}
?>
<div class="cagegoryBnt blank"></div>[/code]
打开Genuine模板内的样式文件style.css，将以下css样式插入到最后
[code].fenlei{
border:none; border-bottom:1px solid #fde6d2; z-index:99; padding:5px; margin-top:5px; background:#ffffff;
}
.fenlei2{
border:none; z-index:99; padding:5px; margin-top:5px; background:#ffffff;
}
.change{
border:1px solid #cc3300; border-right:none; z-index:99; padding:5px; margin-top:5px; position:relative; background:#fef8ef; width:165px;
}
.vis1{
width:475px; border:1px solid #cc3300; background:#fff9ef; position:absolute; margin-top:-400px; margin-left:192px; z-index:98; visibility:hidden; text-align:center;
}
.vis2{
width:475px; border:1px solid #cc3300; background:#fff9ef; position:absolute; margin-top:-400px; margin-left:192px; z-index:98; visibility:visible; text-align:center;
}
.fenlei_two{
white-space:nowrap; float:left;
}[/code]
以上代码是基于Genuine模板改的，若想适用于其他模板，请自行修改代码。。。 UTF 版本 使用后有乱码。已经修改了上面的 GBK 怎么按照 你的办法修改后 全是问号 能行吗？ UTF 的怎么改？ 楼主有演示站看下吗？ 好东西先记录下 好东西，尝试对比修改下。 [i=s] 本帖最后由 wyxgyx 于 2010-9-14 23:10 编辑 [/i]
哎 非常郁闷 怎么转换成UTF-8的啊？
全是问号，晕 乱码是数据取出的编码不对. **** 作者被禁止或删除 内容自动屏蔽 **** 请问放进去 怎么不显示呢 根本不显示................. 用其它的模板，能行吗 在ie6下有效果 严重变形，在火狐下没反应。 [b]回复 [url=http://bbs.ecshop.com/redirect.php?goto=findpost&pid=600352&ptid=137155]1#[/url] [i]phenixsoul[/i] [/b]
" 打开Genuine模板内的样式文件style.css，将以下css样式插入到最后 " 请问在那里打开？怎么打开？ [i=s] 本帖最后由 ITSPW 于 2010-9-28 05:04 编辑 [/i]
好东西不错不错.实现了.谢谢楼主
[url=http://www.thinkpad.cc/]www.thinkpad.cc[/url]
大家可以看看
如果能生成HTML更好.希望楼主改进改进 没有看明白 UTF8乱码问题解决，把catalog_tree.lbi中的
<meta http-equiv="Content-Type" content="text/html; charset=gbk"> 改为 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
mysql_query ( "set names 'GBK'" ); 改为 mysql_query ( "set names 'UTF8'" ); 请问一下，在默认模板下，我改了不行，不显示，不知，有默认模板的吗 如何调用品牌呢？ 还有一个问题 能不能不读取数据库呢？ 是不用填数据库 写错了 [b]回复 [url=http://bbs.ecshop.com/redirect.php?goto=findpost&pid=600591&ptid=137155]3#[/url] [i]用户名[/i] [/b]
那是因为你的是UTF版本的。 楼主都说了 只支持GBK的 我的是 只要一改懂一下模版 刷新一次出现错误 要再刷新一下才正常！ 这个版本 好 一直觉得京东这种的分类树好 以后就改成这种的
不过有个问题 像小一点的网站 商品分类能不能一个商品同属几个分类呢？
比如一个商品 即属于衣服分类 又属于 外套分类 我直接复制代码上去
前面会提示错误
Warning: mysql_connect() [function.mysql-connect]: Can't connect to MySQL server on 'localhost' (10061) in
很长一段
但是下面分类也显示出来了的
我想问一下 填数据有什么好处？
既然 不填都显示 为什么非要填呢？
对程序不懂，希望高手帮忙解决一下 谢谢了 没人知道吗？ 支持，不错的功能，正需要 不行啊！！！
页:
[1]
2