西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > ecshop教程 >

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

时间:2015-10-02 12:39来源:未知 作者:好模板 点击:次
实现ecshop首页增加楼层直达效果分析，效果如下图所示： 效果说明：当未达到楼层时，导航部分隐藏，到达楼层时，导航显示。点击楼层，会直接到达楼层。 代码开始： 首页顶部需要

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

以上代码不可以直接使用，需要按自己的模板处理。
(责任编辑：好模板)

顶一下
(0)
0%
踩一下
(2)
100%
------分隔线----------------------------
栏目列表
热点内容
随机内容
随机模板
CopyRight © 2010-2023 乐道主机 All Rights Reserved.