实现ecshop首页增加楼层直达效果分析

实现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>

以上代码不可以直接使用，需要按自己的模板处理。

以上就是本文章的内容，希望对大家有所帮助