实现ecshop首页增加楼层直达效果分析，效果如下图所示：
效果说明：当未达到楼层时，导航部分隐藏，到达楼层时，导航显示。点击楼层，会直接到达楼层。 代码开始： 首页顶部需要引入jQuery。 XHTML <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 在body标签的下方 增加 下列代码： PHP
<ul id="nav" class="navigation">
<!-- {if $category_goods} -->
<!--{foreach from=$category_goods item=ginfo name=gcur}-->
<li onClick="gotofloor(this);" data-slide="{$ginfo.sort_order}"><a class="f{$ginfo.sort_order}" href="javascript:void(0);">{$ginfo.keywords}</a></li>
<!-- {/foreach} -->
<!-- {/if} -->
</ul>
以上代码不可以直接使用，需要按自己的模板处理。 楼层代码如下： PHP
<div class="j_FloorItem floor-item" id="f{$ginfo.sort_order}" data-slide="{$ginfo.sort_order}">
<div class="fp-lazyload-con j_LazyloadCon" style="height: 452px;">
<div class="module">
<div class="fp-floor fp-floor-{$ginfo.sort_order}"><!--fp-floor-nvz 某个楼层的楼层色块图-->
<div class="floor-content">
<div class="grid-col-191 floor-show">
<ul class="floor-show-top floor-title floor-single-classify">
<li>
<a href="{$ginfo.url}">
<span class="floor-icon qc-iconfont">
{$ginfo.floor_style}
</span>
<span class="floor-key">{$ginfo.cat_name}</span>
</a>
</li>
<li>
<!--More-->
<!--
<b class="floor-title-separator"></b>
</li>
<li>
<a href="">
<span class="floor-icon fp-iconfont"></span>
<span class="floor-key">名称</span>
</a>
</li>
-->
<!--More-->
</ul>
<div class="floor-show-middle floor-brand-slide j_FloorBrandSlide">
<div style="width: 192px; height: 202px;" class="brand-slide-content">
<div>
<a title="{$ginfo.cat_name}" href="javascript:void(0);"><img style="width: 192px" src="{$ginfo.cat_pic}" title="{$ginfo.cat_name}" alt="{$ginfo.cat_name}"></a>
</div>
</div>
</div>
<div class="floor-show-bottom">
<ul class="floor-label-list">
<li>
<!--{foreach from=$ginfo.catgoods item=gc name=gcr}-->
<!--{if $smarty.foreach.gcr.iteration < 3}-->
<a href="{$gc.url}">{$gc.name}</a>
<!--{/if}-->
<!--{/foreach}-->
</li>
<li>
<!--{foreach from=$ginfo.catgoods item=gc name=gcrn}-->
<!--{if $smarty.foreach.gcrn.iteration > 2 && $smarty.foreach.gcrn.iteration < 5}-->
<a href="{$gc.url}">{$gc.name}</a>
<!--{/if}-->
<!--{/foreach}-->
</li>
<li>
<!--{foreach from=$ginfo.catgoods item=gc name=gcrnn}-->
<!--{if $smarty.foreach.gcrnn.iteration > 4 && $smarty.foreach.gcrnn.iteration < 7}-->
<a href="{$gc.url}">{$gc.name}</a>
<!--{/if}-->
<!--{/foreach}-->
</li>
<li>
<!--{foreach from=$ginfo.catgoods item=gc name=gcrnnn}-->
<!--{if $smarty.foreach.gcrnnn.iteration > 6 && $smarty.foreach.gcrnnn.iteration < 9}-->
<a href="{$gc.url}">{$gc.name}</a>
<!--{/if}-->
<!--{/foreach}-->
</li>
</ul>
</div>
</div>
<div class="floor-banner-container">
<div class="grid-col-400">
<?php
$GLOBALS['smarty']->assign('floor_bigimg',get_adv('首页-楼层ID'.$GLOBALS['smarty']->_var['ginfo']['id'].'-方大图',1));
?>
{if $floor_bigimg}
{$floor_bigimg}
{else}
请在供货商后台增加广告位：首页-楼层ID<?php echo $GLOBALS['smarty']->_var['ginfo']['id']; ?>-方大图 大小为400*422
{/if}
</div>
<div class="grid-col-199">
<!--{foreach from=$ginfo.goods item=bestgoods name=goodscur}-->
<!--{if $smarty.foreach.goodscur.iteration > 0 && $smarty.foreach.goodscur.iteration <3}-->
<div class="{if $smarty.foreach.goodscur.iteration eq 1}grid-row-255{else}grid-row-166{/if} floor-banner j_ActLink" href="{$bestgoods.url}">
<!--{if $bestgoods.ye eq 0}-->
<div style="width: 146px;margin: 0 auto;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank"><img class="j_ActImg j_NeedHD" src="{$bestgoods.thumb}" alt="{$bestgoods.name}" height=146" width="146"></a>
</div>
<div style="width: 186px;margin: 0 auto;">
<div style="height: 36px;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank" style="color:#000">{$bestgoods.name}</a>
</div>
<div style="width: 186px;margin: 0px auto;height: 25px;">
<div style="font-size: 14px;color: #CC0000;width: 90px;float: left;font-weight: 700">
<!-- {if $bestgoods.promote_price neq ""} -->
{$bestgoods.promote_price}
<!-- {else}-->
{$bestgoods.shop_price}
<!--{/if}-->
</div>
<div style="float: right;height: 18px;line-height: 16px;background: red;padding: 5px;color: #fff;margin-top: -8px;font-weight: 700;">
立即购商品
</div>
</div>
</div>
<!--{else}-->
<img class="j_ActImg j_NeedHD" src="no_goods.jpg" alt="未传商品" height="210" width="199"/>
<!--{/if}-->
</div>
<!--{/if}-->
<!--{/foreach}-->
</div>
<div class="grid-col-199 hidden-in-990">
<!--{foreach from=$ginfo.goods item=bestgoods name=goodscur}-->
<!--{if $smarty.foreach.goodscur.iteration > 2 && $smarty.foreach.goodscur.iteration <5}-->
<div class="{if $smarty.foreach.goodscur.iteration eq 1}grid-row-255{else}grid-row-166{/if} floor-banner j_ActLink" href="{$bestgoods.url}">
<!--{if $bestgoods.ye eq 0}-->
<div style="width: 146px;margin: 0 auto;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank"><img class="j_ActImg j_NeedHD" src="{$bestgoods.thumb}" alt="{$bestgoods.name}" height=146" width="146"></a>
</div>
<div style="width: 186px;margin: 0 auto;">
<div style="height: 36px;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank" style="color:#000">{$bestgoods.name}</a>
</div>
<div style="width: 186px;margin: 0px auto;height: 25px;">
<div style="font-size: 14px;color: #CC0000;width: 90px;float: left;font-weight: 700">
<!-- {if $bestgoods.promote_price neq ""} -->
{$bestgoods.promote_price}
<!-- {else}-->
{$bestgoods.shop_price}
<!--{/if}-->
</div>
<div style="float: right;height: 18px;line-height: 16px;background: red;padding: 5px;color: #fff;margin-top: -8px;font-weight: 700;">
立即购商品
</div>
</div>
</div>
<!--{else}-->
<img class="j_ActImg j_NeedHD" src="no_goods.jpg" alt="未传商品" height="210" width="199"/>
<!--{/if}-->
</div>
<!--{/if}-->
<!--{/foreach}-->
</div>
<div class="grid-col-199">
<!--{foreach from=$ginfo.yuegou_goods item=bestgoods name=goodscur}-->
<div class="{if $smarty.foreach.goodscur.iteration eq 1}grid-row-255{else}grid-row-166{/if} floor-banner j_ActLink" href="{$bestgoods.url}">
<!--{if $bestgoods.ye eq 0}-->
<div style="width: 146px;margin: 0 auto;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank"><img class="j_ActImg j_NeedHD" src="{$bestgoods.thumb}" alt="{$bestgoods.name}" height=146" width="146"></a>
</div>
<div style="width: 186px;margin: 0 auto;">
<div style="height: 36px;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank" style="color:#000">{$bestgoods.name}</a>
</div>
<div style="width: 186px;margin: 0px auto;height: 25px;">
<div style="font-size: 14px;color: #CC0000;width: 90px;float: left;font-weight: 700">
<!-- {if $bestgoods.promote_price neq ""} -->
{$bestgoods.promote_price}
<!-- {else}-->
{$bestgoods.shop_price}
<!--{/if}-->
</div>
<div style="float: right;height: 18px;line-height: 16px;background: #14B343;padding: 5px;color: #FFF;margin-top: -8px;font-weight: 700;">
约购商品
</div>
</div>
</div>
<!--{else}-->
<img class="j_ActImg j_NeedHD" src="no_goods.jpg" alt="未传商品" height="210" width="199"/>
<!--{/if}-->
</div>
<!--{/foreach}-->
</div>
</div>
</div>
</div>
</div>
</div>
{if $ginfo.is_longads eq 1}
<!--广告条-->
<div class="fp-lazyload-con j_LazyloadCon" style="height: 120px;"><div class="floor-ad-banner">
<ins style="display:inline-block;padding:0;margin:0;width:1190px;height:90px;*zoom:1;*display:inline"><div style="overflow:hidden;display:inline-block;position:relative;width:1190px;height:90px;*display:inline;*zoom:1;font:12px/1.5 tahoma,'Hiragino Sans GB','microsoft yahei',sans-serif;">
<?php
$GLOBALS['smarty']->assign('floor_img',get_adv('首页-楼层F'.$GLOBALS['smarty']->_var['ginfo']['sort_order'].'-长图',1));
?>
{if $floor_img}
{$floor_img}
{else}
请在供货商后台增加广告位：首页-楼层F<?php echo $GLOBALS['smarty']->_var['ginfo']['sort_order']; ?>-长图 大小为1190*90
{/if}
</div></div>
</div>
<!--广告条-->
{/if}
</div>
以上代码不可以直接使用，需要按自己的模板处理。 |
实现ecshop首页增加楼层直达效果分析
时间:2015-10-02 12:39来源:未知 作者:最模板 点击:次
实现ecshop首页增加楼层直达效果分析，效果如下图所示： 效果说明：当未达到楼层时，导航部分隐藏，到达楼层时，导航显示。点击楼层，会直接到达楼层。 代码开始： 首页顶部需要
顶一下
(0)
0%
踩一下
(2)
100%
------分隔线----------------------------
- 热点内容
-
- ecshop重置后台密码MD5+salt
ecshop密码加密方式： MD5 32位+salt，简单来说就是明文密码用MD5加...
- 如何在ecshop首页调用指定分类的热
如何在ecshop首页调用指定分类的热销、推荐、新品商品...
- 添加ecshop注册新会员敏感词功能
敏感词一般是指带有敏感政治倾向（或反执政党倾向）、暴力倾...
- Ecshop程序修改_如何实现会员注册成
Ecshop程序修改_如何实现会员注册成功后就是某种...
- ECSHOP信息提示页面的跳转时间设置
ECSHOP信息提示页面的跳转时间设置...
- ecshop重置后台密码MD5+salt
- 随机模板
-
-
韩国SZ服装模板|ecshop服装
人气:670
-
ecshop仿emoi家居用品商城
人气:979
-
三色可换企业网站模板a
人气:575
-
中英双语全静态生成企业
人气:677
-
ecshop仿梦芭莎2013最新版免
人气:4041
-
ecshop内衣服装综合模板
人气:1237
-