欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Jquery开发电商网站实战(带源码)

程序员文章站 2022-03-21 17:15:53
组件化思想,包含: 下拉菜单项封装 + 按需加载 搜索功能组件化,显示数据 + 下拉显示 + 缓存 分类导航按需加载 幻灯片效果组件封装及按需加载 商品楼层模块组件化 + 商品数据按需加载 + Tab选项卡 + 电梯结构 是时候放出大长图了!!! index.html ......

组件化思想,包含:

下拉菜单项封装 + 按需加载

搜索功能组件化,显示数据 + 下拉显示 + 缓存

分类导航按需加载

幻灯片效果组件封装及按需加载

商品楼层模块组件化 + 商品数据按需加载 + tab选项卡 + 电梯结构

是时候放出大长图了!!!

Jquery开发电商网站实战(带源码)

 

 

index.html

<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <!-- 站点导航开始 -->
    <div class="nav-site">
        <div class="container">
            <ul class="fl">
                <li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲,请登录</a></li>
                <li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
                <li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛xx网</a></li>
            </ul>
            <ul class="fr">
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link  transition">我的xx<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
                    </ul>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
                    </ul>
                </li>
                <li class="fl">
                    <a href="###" target="_blank" class="nav-site-category link">商品分类</a>
                </li>
                <li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li class="dropdown-loading"></li>
                    </ul>
                </li>
                <li class="nav-site-service menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                    <ul class="dropdown-layer dropdown-right">
                        <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 站点导航结束 -->
    <!-- header区开始 -->
    <div class="header">
        <div class="container">
            <h1 class="fl"><a href="./index.html" class="header-logo text-hidden">xx网</a></h1>
            <div id="header-search" class="search fl">
                <form action="https://s.taobao.com/search" class="search-form">
                    <input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off" class="search-inputbox fl" />
                    <input type="submit" value="搜索" class="search-btn btn fl" />
                </form>
                <ul class="search-layer">
                    <li class="search-layer-item text-ellipsis">111</li>
                    <li class="search-layer-item text-ellipsis">111</li>
                    <li class="search-layer-item text-ellipsis">111</li>
                </ul>
            </div>
            
        </div>
    </div>
    <!-- header区开始 -->
    <!-- 中心部分导航 -->
    <div class="nav-main">
        <div class="container">
            <a href="###" target="_blank" class="link">数码城</a
            ><a href="###" target="_blank" class="link">天黑黑</a
            ><a href="###" target="_blank" class="link">团购</a
            ><a href="###" target="_blank" class="link">发现</a
            ><a href="###" target="_blank" class="link">二手特价</a
            ><a href="###" target="_blank" class="link">名品汇</a>
        </div>
    </div>
    <div class="focus">
        <div class="container">
            <div id="focus-category" class="category fl">
                <a href="###" target="_blank" class="category-title"><i class="icon">&#xe608;</i>商品分类</a>
                <ul class="category-list">
                    <li class="dropdown" data-active="category" data-load="js/category-detail-1.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">家用电器</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-2.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">手机</a
                            >、<a href="###" target="_blank" class="dropdown-link">运营商</a
                            >、<a href="###" target="_blank" class="dropdown-link">数码</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-3.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">电脑</a
                            >、<a href="###" target="_blank" class="dropdown-link">办公</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-4.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">家居</a
                            >、<a href="###" target="_blank" class="dropdown-link">家具</a
                            >、<a href="###" target="_blank" class="dropdown-link">家装</a
                            >、<a href="###" target="_blank" class="dropdown-link">厨具</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-5.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">男装</a
                            >、<a href="###" target="_blank" class="dropdown-link">女装</a
                            >、<a href="###" target="_blank" class="dropdown-link">童装</a
                            >、<a href="###" target="_blank" class="dropdown-link">内衣</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-6.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">化妆</a
                            >、<a href="###" target="_blank" class="dropdown-link">清洁</a
                            >、<a href="###" target="_blank" class="dropdown-link">宠物</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-7.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">运动户外</a
                            >、<a href="###" target="_blank" class="dropdown-link">钟表</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-8.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">汽车</a
                            >、<a href="###" target="_blank" class="dropdown-link">汽车用品</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-9.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">母婴</a
                            >、<a href="###" target="_blank" class="dropdown-link">玩具乐器</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-10.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">食品</a
                            >、<a href="###" target="_blank" class="dropdown-link">酒类</a
                            >、<a href="###" target="_blank" class="dropdown-link">生鲜</a
                            >、<a href="###" target="_blank" class="dropdown-link">特产</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-11.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">医药保健</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-12.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">图书</a
                            >、<a href="###" target="_blank" class="dropdown-link">音像</a
                            >、<a href="###" target="_blank" class="dropdown-link">电子书</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-13.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">彩票</a
                            >、<a href="###" target="_blank" class="dropdown-link">旅行</a
                            >、<a href="###" target="_blank" class="dropdown-link">充值</a
                            >、<a href="###" target="_blank" class="dropdown-link">票务</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-14.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">理财</a
                            >、<a href="###" target="_blank" class="dropdown-link">众筹</a
                            >、<a href="###" target="_blank" class="dropdown-link">白条</a
                            >、<a href="###" target="_blank" class="dropdown-link">保险</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="focus-slider" class="slider fl">
                <div class="slider-container">
                    <div class="slider-item">
                        <!-- <a href="###" target="_blank"><img src="../img/focus-slider/loading.gif" data-src="https://gratisography.com/pictures/407_1.jpg" alt="" class="slider-img" /></a> -->
                        <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/1.png" alt="" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/2.png" alt="" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/3.png" alt="" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/4.png" alt="" class="slider-img" /></a>
                    </div>
                </div>
                <ol class="slider-indicator-wrap">
                    <li class="slider-indicator text-hidden fl">1</li>
                    <li class="slider-indicator text-hidden fl">2</li>
                    <li class="slider-indicator text-hidden fl">3</li>
                    <li class="slider-indicator text-hidden fl">4</li>
                </ol>
                <a href="javascript:;" class="slider-control slider-control-left">&lt;</a>
                <a href="javascript:;" class="slider-control slider-control-right">&gt;</a>
            </div>
            <div class="focus-sidebar fr">
                <div class="focus-news">
                    <div class="focus-news-head">
                        <h2 class="focus-news-title fl">xx快报</h2>
                        <a href="###" target="_blank" class="link fr">更多 &gt;</a>
                    </div>
                    <div class="focus-news-body">
                        <p class="text-ellipsis">
                            <a href="###" target="_blank" class="link"><strong>[特惠]</strong> 精选图书每满150减50</a>
                        </p>
                        <p class="text-ellipsis">
                            <a href="###" target="_blank" class="link"><strong>[公告]</strong> 因广州图书仓搬仓升级配送延迟</a>
                        </p>
                        <p class="text-ellipsis">
                            <a href="###" target="_blank" class="link"><strong>[特惠]</strong> 爆款手机12期免息</a>
                        </p>
                        <p class="text-ellipsis">
                            <a href="###" target="_blank" class="link"><strong>[公告]</strong> 广东、福建受台风影响配送延迟</a>
                        </p>
                        <p class="text-ellipsis">
                            <a href="###" target="_blank" class="link"><strong>[特惠]</strong> 大闸蟹领券满399减180</a>
                        </p>
                    </div>
                </div>
                <div class="focus-service cf">
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe612;</i>
                        <span class="focus-service-text">话费</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe611;</i>
                        <span class="focus-service-text">机票</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe607;</i>
                        <span class="focus-service-text">电影票</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe60e;</i>
                        <span class="focus-service-text">游戏</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe605;</i>
                        <span class="focus-service-text">彩票</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe603;</i>
                        <span class="focus-service-text">加油卡</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe602;</i>
                        <span class="focus-service-text">酒店</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe601;</i>
                        <span class="focus-service-text">火车票</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe60d;</i>
                        <span class="focus-service-text">众筹</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe60c;</i>
                        <span class="focus-service-text">理财</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe610;</i>
                        <span class="focus-service-text">礼品卡</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe60f;</i>
                        <span class="focus-service-text">白条</span>
                    </a>
                </div>
                <div class="focus-ad"></div>
            </div>
        </div>
    </div>

    <div class="todays">
        <div class="container">
            <div id="todays-slider" class="slider">
                <div class="slider-container">
                    <div class="slider-item">
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/1.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/2.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/3.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/4.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/5.png" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/6.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/7.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/8.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/9.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/10.png" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/11.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/3.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/5.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/7.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/9.png" class="slider-img" /></a>
                    </div>
                </div>
                <a href="javascript:;" class="slider-control slider-control-left">&lt;</a>
                <a href="javascript:;" class="slider-control slider-control-right">&gt;</a>
            </div>
        </div>
    </div>

    <!-- floor-1 -->
    <div class="floor">
        <div class="container">
            <img src="img/floor-loading.gif" alt="" />
        </div>
    </div>

    <!-- floor2 -->
    <div class="floor">
        <div class="container">
            <img src="img/floor-loading.gif" alt="" />
        </div>
    </div>

    <!-- floor3 -->
    <div class="floor">
        <div class="container">
           <img src="img/floor-loading.gif" alt="" /> 
        </div>
    </div>

    <!-- floor4 -->
    <div class="floor">
        <div class="container">
         <img src="img/floor-loading.gif" alt="" />   
        </div>
    </div>

    <!-- floor5 -->
    <div class="floor floor-last">
        <div class="container">
            <img src="img/floor-loading.gif" alt="" />
        </div>
    </div>

    <!-- elevator -->
    <div id="elevator" class="elevator container">
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">f1</span>
            <span class="elevator-text">服饰</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">f2</span>
            <span class="elevator-text">美妆</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">f3</span>
            <span class="elevator-text">手机</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">f4</span>
            <span class="elevator-text">家电</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">f5</span>
            <span class="elevator-text">数码</span>
        </a>
    </div>
   
    
    <div class="toolbar">
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe617;</i>
            <span class="toolbar-text transition">会员</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe613;</i>
            <span class="toolbar-text transition">购物车</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe616;</i>
            <span class="toolbar-text transition">我的关注</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe614;</i>
            <span class="toolbar-text transition">我的消息</span>
        </a>
        <a href="javascript:;" id="backtotop" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe615;</i>
            <span class="toolbar-text transition">顶部</span>
        </a>
    </div>
    <script>
    //两种判断是否有jquery库的写法:
    // window.jquery || document.write('<script src="js/jquery.js"><' + '/script>')
    window.jquery || document.write('<script src="js/jquery.js"><\/script>');
    </script>
    <script src="js/transition.js"></script>
    <script src="js/showhide.js"></script>
    <script src="js/dropdown.js"></script>
    <script src="js/search.js"></script>
    <script src="js/move.js"></script>
    <script src="js/slider.js"></script>
    <script src="js/tab.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

base.css

/*css reset*/
    /*清除内外边距*/
    body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
    ul, ol, li, dl, dt, dd, /*列表元素*/
    form, fieldset, legend, input, button, select, textarea, /*表单元素*/
    th, td, /*表格元素*/
    pre {
        padding: 0;
        margin: 0;
    }

    /*重置默认样式*/
    body, button, input, select, textarea {
        /*font: 12px/1 微软雅黑, tahoma, helvetica, arial, 宋体, sans-serif;*/
        color: #333;
        font: 12px/1 "microsoft yahei", tahoma, helvetica, arial, simsun, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: normal;
    }
    em, i {
        font-style: normal;
    }

    a {
        text-decoration: none;
    }
    li {
        list-style-type: none;
        vertical-align: top;
    }
    img {
        border: none;
        /*display: block;*/
        vertical-align: top;
    }
    textarea {
        overflow: auto;
        resize: none;
    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
    }

/*常用公共样式*/
    .fl {
        float: left;
        display: inline;
    }
    .fr {
        float: right;
        display: inline;
    }
    .cf:before,
    .cf:after {
        content: " ";
        display: table;
        
    }
    .cf:after {
        clear: both;
    }
    .cf {
        *zoom: 1;
    }

common.css

/*公共样式*/

    .container {
        /*站点导航*/
        width: 1200px;
        margin: 0 auto;
    }

    a.link {
        /*链接正常颜色*/
        color: #4d555d;
    }

    a.link:hover {
        /*链接经过颜色*/
        color: #f01414 !important;
    }

    .transition {
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    .text-hidden{
        text-indent: -9999px;
        overflow: hidden;
    }


    .text-ellipsis{
        text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
    }

/*icon*/
    @font-face {
        font-family: "iconfont";
        src: url('../test/font/iconfont.eot?t=1477124206');
        /* ie9*/
        src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* ie6-ie8 */
        url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
        url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, safari, android, ios 4.2+*/
        url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
        /* ios 4.1- */
    }

    .icon {
        font-family: "iconfont" !important;
        font-size: 14px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }

/*showhide*/

    .fadeout {
        visibility: hidden !important;
        opacity: 0 !important;
    }
    .slideupdowncollapse {
        height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .slideleftrightcollapse {
        width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

/*dropdown*/
    .dropdown {
        position: relative;
    }

    .dropdown-toggle {
        position: relative;
        z-index: 2;
    }

    .dropdown-arrow {
        display: inline-block;
        line-height: 1;
        /*background-repeat: no-repeat;*/
        vertical-align: middle;
        
    }
    


    .dropdown-layer {
        display: none;
        position: absolute;
        z-index: 1;
    }

    .dropdown-left {
        left: 0;
        right: auto;
    }

    .dropdown-right {
        right: 0;
        left: auto;
    }

     .dropdown-loading{
            width:32px;
            height: 32px;
            background: url(../img/loading.gif) no-repeat;
            margin: 20px;
        }

    .menu-active .dropdown-arrow{
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    }  

/*.menu .dropdown*/
        .menu{
            z-index: 3;
        }

        .menu .dropdown-toggle {
            display: block;
            height: 100%;
            padding: 0 13px 0 12px;
            border-left: 1px solid #f3f5f7;
            border-right: 1px solid #f3f5f7;
        }

        .menu .dropdown-arrow {
            /*width: 8px;
            height: 6px;
            background-image: url(../img/dropdown-arrow.png);*/
            margin-left: 5px;
        }

        .menu .dropdown-layer {
            top: 43px;
            background-color: #fff;
            border: 1px solid #cdd0d4;
        }

        .menu-item {
            display: block;
            height: 30px;
            line-height: 30px;
            padding: 0 12px;
            color: #4d555d;
            white-space: nowrap;
        }

        .menu-item:hover {
            background-color: #f3f5f7;
        }

        .menu-active .dropdown-toggle {
            background-color: #fff;
            border-color: #cdd0d4;
        }

        .menu-active .dropdown-arrow {
            /*background-image: url(../img/dropdown-arrow-active.png);*/
        }

        /*.menu-active .dropdown-layer {
            display: block;
        }*/

/*btn*/
    .btn {
        display: inline-block;
        border: none;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }        

/*search*/
    .search {
        position: relative;
        border: 1px solid #cfd2d5;
    }
    .search-inputbox {
        width: 585px;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        background-color: #fff;
        border: none;
    }
    .search-btn {
        width: 73px;
        height: 40px;
        line-height: 40px;
        background-color: #07111b;
        font-size: 14px;
        
    }
    .search-layer {
        display: none;
        position: absolute;
        top: 100%;
        left: -1px;
        width: 100%;
        background-color: #fff;
        border: 1px solid #cfd2d5;
        z-index: 3;
    }
    .search-layer-item {
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        cursor: pointer;

    }
    .search-layer-item:hover {
        background-color: #f3f5f7;
    }



/*category*/

    .category {
        position: relative;
        width: 208px;
        margin-top: -62px;
        font-size: 14px;
    }
    .category .dropdown{
        position: static;
    }
    .category-title {
        display: block;
        height: 54px;
        line-height: 54px;
        padding: 0 20px;
        background-color: #c81414;
        color: #fff;
    }

    .category-title .icon {
        margin-right: 10px;
        font-size: 16px;
    }

    .category-list {
        height: 512px;
        background-color: #f01414;
    }
    .category .dropdown-toggle {
        height: 36px;
        line-height: 36px;
        padding-left: 16px;
        color: #fff;
    }

    .category .dropdown-link {
        color: #fff;
    }

    .category .dropdown-arrow {
        position: absolute;
        top: 12px;
        right: 12px;
        font-family: simsun;
        font-weight: bold;
    }

    .category-active .dropdown-toggle {
        background-color: #fff;
    }

    .category-active .dropdown-toggle,
    .category-active .dropdown-link {
        color: #f01414;
    }

    .category .dropdown-layer {
        top: 54px;
        left: 100%;
        width: 744px;
        min-height: 473px;
        padding: 8px 0 31px 0;
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }

    .category-details {
        width:744px;        
        margin-top: 24px;
        line-height: 20px;
    }
    .category-details-title{
        width: 84px;
        padding-right: 16px;
        border-right: 1px solid #d9dde1;
        text-align: right;
       
    }

    .category-details-title-link {
        color: #07111b;
        font-weight: bold;
    }

    .category-details-item {
        width: 592px;
        padding-left: 15px;
    }
    .category-details-item .link {
        display: inline-block;
        margin-right: 16px;
    }

    .category .dropdown-loading {
        margin: 220px auto 0;
     }

/*slider*/
    .slider {
            
            position: relative;
            overflow: hidden;
            width: 728px;
            height: 504px;
        }

    .slider-indicator-wrap {
        position: absolute;
        bottom: 24px;
        left: 50%;
        margin-left: -36px;
    }

    .slider-indicator {
        width: 8px;
        height: 8px;
        background-color: #313a43;
        border-radius: 50%;
        margin-right: 12px;
        cursor: pointer;
    }

    .slider-indicator-active {
        position: relative;
        top: -2px;
        background-color: #f7f8f9;
        border: 2px solid #858b92;
    }

    .slider-control {
        display: none;
        position: absolute;
        top: 50%;
        margin-top: -31px;
        width: 28px;
        height: 62px;
        line-height: 62px;
        background-color: #000;
        opacity: 0.8;
        filter: alpha(opacity=80);
        color: #fff;
        font-size: 22px;
        font-family: simsun;
        text-align: center;
    }

    .slider-control-left {
        left: 0;
    }

    .slider-control-right {
        right: 0;
    }

    .slider-fade .slider-item {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .slider-slide .slider-item {
        position: absolute;
        top: 0;

        left: 100%;
        width: 100%;
        height: 100%;
    }
    /*.slider-slide .slider-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 1000%;
            height: 100%;
            background-color: red;
        }
        .slider-slide .slider-item {
            float: left;
        }*/
    /*tab*/
   .tab-panel {
        display: none;
        
    }     

index.css

/*nav-site*/
.nav-site{ /*站点导航整体设置*/
    width:100%;
    background-color: #f3f5f7;
}
.nav-site .container{  /*站点导航内容块整体设置*/
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{  /*站点导航“亲,请登陆”设置*/
    margin-left:15px;
    color:#f01414;
}
.nav-site-signup,
.nav-site-mobile{ /*站点导航“注册和手机购买”设置*/
    margin-left:10px;
}
.nav-site-category{
    margin:0 10px;
}

.nav-site-service{
    margin-right:15px;
}



/*下拉菜单样式dropdown*/
.dropdown{
    position: relative;
}
.dropdown-toggle{
    position: relative;
    z-index: 2;
    display:block;
    height: 100%;
    padding: 0 16px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;

}
.dropdown-arrow{
    display: inline-block;
    /*width:8px;
    height:6px;*/
    /*background: url(../img/dropdown-arrow.png) no-repeat;*/
    margin-left:8px;
    vertical-align: middle;

}
.dropdown-layer{
    display:none;
    position: absolute;
    top:43px;
    background-color:#fff;
    z-index: 1;
    border: 1px solid #cdd0d4;
}
.dropdown-left{
    left:0;
    right:auto;

}
.dropdown-right{
    right:0;
    left:auto;

}
.dropdown-item{
    display:block;
    height:30px;
    line-height:30px;
    padding:0 12px;
    color:#4d555d;
    white-space: nowrap;

}
.dropdown-item:hover{
    background-color: #f3f5f7;
}

/*下拉菜单通过js和css来实现dropdown*/

/*header*/
.header{
    width: 100%;
    height: 124px;
    background-color: #f3f5f7;
}
    .header-logo,
    .header .search,
    .header .cart {
        margin-top: 36px;
    }
.header-logo{
    display: block;
    width:136px;
    height: 48px;
    background: url(../img/header-logo.png) no-repeat;
    margin-left:15px;
    
}

.header .search{
    margin-left: 145px;
}
.header .cart{
    margin-right: 15px;
}

/*nav-main*/
    .nav-main {
        width: 100%;
        height: 48px;
        background-color: #07111b;
        margin-bottom: 8px;
        text-indent: 182px;
    }
    .nav-main .link {
        margin-left: 50px;
        color: #fff;
        font-size: 14px;
        line-height: 48px;
    }
    
/*focus*/
    .focus {
        width: 100%;
        height: 504px;
        background-color: #eee;
        margin-bottom: 8px;
    }

    .focus-sidebar {
        width: 249px;
    }

    .focus-news {
        padding: 7px 20px 12px;
        background-color: #fff;
        border: 1px solid #d9dde1;
        border-bottom: none;
    }
    .focus-news-head {
        height: 38px;
        line-height: 38px;
    }
    .focus-news-title {
        color: #f01414;
        font-size: 16px;
    }
    .focus-news-body {
        line-height: 28px;
    }
    .focus-service {
        background-color: #fff;
        border-left: 1px solid #d9dde1;
    }
    .focus-service-item {
        width: 61px;
        height: 71px;
        border-top: 1px solid #d9dde1;
        border-right: 1px solid #d9dde1;
        text-align: center;
    }
    .focus-service-icon,
    .focus-service-text {
        display: inline-block;
        width: 100%;
    }
    .focus-service-icon {
        margin-top: 17px;
        color: #f67272;
        font-size: 22px;
    }
    .focus-service-text {
        margin-top: 6px;
        color: #4d555d;
    }
    .focus-ad {
        width: 100%;
        height: 90px;
        background: url(../img/focus-ad.png) no-repeat;
    }
    .focus .slider{
        margin-left: 8px;
    }

/*todays*/
    .todays .slider{
        position: relative;
        z-index:1;
        width:100%;
        height:158px;
        margin-bottom:10px;
    }

    .todays .slider-img{
        width:240px;

    } 


 /*floor*/
        .floor {
            height: 533px;
            margin-bottom: 10px;
        }
        .floor-last{
            margin-bottom: 32px;
        }
        .floor .container{
            position: relative;
            z-index: 1;
        }
        
        .floor-head {
            height: 68px;
            border-bottom: 1px solid #f01414;
        }
        .floor-title {
            margin-top: 22px;
        }
        .floor-title-num {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            border-radius: 50%;
            background-color: #07111b;
            margin-right: 12px;
            color: #fff;
            text-align: center;
        }
        .floor-title-text {
            position: relative;
            top: 3px;
            color: #07111b;
            font-size: 20px;
        }
        .floor-body {
            height: 464px;
        }
        .floor-item {
            width: 200px;
            height: 232px;
            text-align: center;
        }
        .floor-item:hover {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        .floor-item-pic {
            margin-top: 24px;
        }
        .floor-item-name {
            margin-top: 24px;
        }
        .floor-item-name .link {
            color: #07111b;
        }
        .floor-item-price {
            margin-top: 11px;
            color: #f01414;
            font-size: 14px;
            font-weight: bold;
        } 
        

        .floor-head .tab-item-wrap {
            height: 62px;
            line-height: 62px;
            margin-top: 7px;
        }
        .floor-head .tab-item {
            display: inline-block;
            margin-right: 16px;
            color: #93999f;
            font-size: 14px;
        }
        .floor-head .tab-item-active {
            background: url(../img/floor-arrow.png) no-repeat center bottom;
            color: #f01414;
        }
        .floor-divider {
            width: 1px;
            height: 14px;
            background-color: #d9dde1;
            margin: 22px 16px 0 0;
        }
        .floor-head .tab-panel {
            height: 100%;
        }
    

/*elevator*/
    .elevator {
        display: none;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -90px;
        margin-left: -640px;

        
    }
    .elevator-item {
        display: block;
        width: 24px;
        height: 35px;
        line-height: 35px;
        border-top: 1px solid #d9dde1;
        text-align: center;
        color: #4d555d;
    }
    .elevator-item:hover,
    .elevator-active {
        color: #f01414;
    }
    .elevator-text {
        display: none;
    }
    .elevator-item:hover .elevator-num,
    .elevator-active .elevator-num {
        display: none;
    }
    .elevator-item:hover .elevator-text,
    .elevator-active .elevator-text {
        display: block;
    }

    
    


/*toolbar*/
    .toolbar {
        position: fixed;
        z-index: 2;
        right: 0;
        top: 50%;
        margin-top: -102px;
    }
    .toolbar-item {
        position: relative;
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-bottom: 1px;
        color: #fff;
        text-align: center;
    }
    .toolbar-icon {
        position: relative;
        z-index: 2;
        display: block;
        background-color: #b7bbbf;
        font-size: 30px;
    }
    .toolbar-text {
        position: absolute;
        left: 0;
        top: 0;
        width: 62px;
        height: 40px;
    }
    .toolbar-item:hover .toolbar-icon {
        background-color: #71777d;
    }
    .toolbar-item:hover .toolbar-text {
        left: -62px;
        background-color: #71777d;
    }

transition.js(兼容浏览器的transition)

(function () {
    var transitionendeventname = {
        transition: 'transitionend',
        moztransition: 'transitionend',
        webkittransition: 'webkittransitionend',
        otransition: 'otransitionend otransitionend'
    };
    var transitionend = '',
        issupport = false;

    for (var name in transitionendeventname) {
        if (document.body.style[name] !== undefined) {
            transitionend = transitionendeventname[name];
            issupport = true;
            break;
        }
    }

    window.mt = window.mt || {};
    window.mt.transition = {
        end: transitionend,
        issupport: issupport
    };
})();

showhide.js(动画效果设置)

(function($) {
    var transition = window.mt.transition; // transition兼容解决,transition.js

    // 提取init公共部分
    function init($elem, hiddencallback) {

        if ($elem.is(':hidden')) {
            $elem.data('status', 'hidden');
            if (typeof hiddencallback === 'function') hiddencallback();

        } else {
            $elem.data('status', 'shown');
        }
    }

    // 提取show公共部分

    function show($elem, callback) {
        if ($elem.data('status') === 'show') return;
        if ($elem.data('status') === 'shown') return;
        $elem.data('status','show').trigger('show');
        callback();
    }

    function hide($elem, callback) {
        if ($elem.data('status') === 'hide') return;
        if ($elem.data('status') === 'hidden') return;
        $elem.data('status', 'hide').trigger('hide');
        callback();
    }

    // 正常显示和隐藏
    var silent = {
        // 提取公共init后
        init: init,
      
        show: function($elem) {
            show($elem, function() {
                $elem.show();
                $elem.data('status', 'shown').trigger('shown');
            });
        },
      
        hide: function($elem) {
            hide($elem, function() {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
        }
    };

    // 带效果的显示和隐藏,css3实现方法
    var css3 = {

        fade: { // 淡入淡出

            init: function($elem) {
                css3._init($elem, 'fadeout');

            },

            show: function($elem) {
                css3._show($elem, 'fadeout');

            },

            hide: function($elem) {
                css3._hide($elem, 'fadeout');

            }

        },
        slideupdown: { 

            init: function($elem) {
                $elem.height($elem.height());
                css3._init($elem, 'slideupdowncollapse');

            },
            show: function($elem) {
                css3._show($elem, 'slideupdowncollapse');

            },
            hide: function($elem) {
                css3._hide($elem, 'slideupdowncollapse');
            }
        },
        slideleftright: { // 左右滚动
            init: function($elem) {
                $elem.width($elem.width());
                css3._init($elem, 'slideleftrightcollapse');

            },
            show: function($elem) {
                css3._show($elem, 'slideleftrightcollapse');

            },
            hide: function($elem) {
                css3._hide($elem, 'slideleftrightcollapse');
            }
        },
        fadeslideupdown: { // 淡入淡出上下滚动
            init: function($elem) {
                $elem.height($elem.height());
                css3._init($elem, 'fadeout slideupdowncollapse');

            },
            show: function($elem) {
                css3._show($elem, 'fadeout slideupdowncollapse');

            },
            hide: function($elem) {
                css3._hide($elem, 'fadeout slideupdowncollapse');
            }
        },

        fadeslideleftright: { // 淡入淡出左右滚动
            init: function($elem) {
                $elem.width($elem.width());
                css3._init($elem, 'fadeout slideleftrightcollapse');

            },
            show: function($elem) {
                css3._show($elem, 'fadeout slideleftrightcollapse');

            },
            hide: function($elem) {
                css3._hide($elem, 'fadeout slideleftrightcollapse');
            }
        }
    };

    css3._init = function($elem, classname) {
        $elem.addclass('transition');
        init($elem, function() {
            $elem.addclass(classname);

        });

    };

    css3._show = function($elem, classname) {
        show($elem, function() {
            $elem.off(transition.end).one(transition.end, function() {
                $elem.data('status', 'shown').trigger('shown');
            });
            $elem.show();
            settimeout(function() {
                $elem.removeclass(classname);
            }, 20);
        });


    };

    css3._hide = function($elem, classname) {
        hide($elem, function() {
            $elem.off(transition.end).one(transition.end, function() {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
            $elem.addclass(classname);

        });

    }

    // 带效果的显示和隐藏,js实现方法
    var js = {
        fade: { // 淡入淡出
            init: function($elem) {
                js._init($elem);
            },
            show: function($elem) {
                js._show($elem, 'fadein');
            },
            hide: function($elem) {

                js._hide($elem, 'fadeout');

            }
        },
        slideupdown: { // 上下滚动
            init: function($elem) {
                js._init($elem);
            },
            show: function($elem) {
                js._show($elem, 'slidedown');

            },
            hide: function($elem) {

                js._hide($elem, 'slideup');

            }
        },
        slideleftright: { // 左右滚动
            init: function($elem) {
                js._custominit($elem, {

                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            },
            show: function($elem) {

                js._customshow($elem);
            },
            hide: function($elem) {

                js._customhide($elem, {
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            }
        },
        fadeslideupdown: { // 淡入淡出上下滚动
            init: function($elem) {
  
                js._custominit($elem, {

                    'opacity': 0,
                    'height': 0,
                    'padding-top': 0,
                    'padding-bottom': 0
                });
            },
            show: function($elem) {

                js._customshow($elem);
            },
            hide: function($elem) {

                js._customhide($elem, {
                    'opacity': 0,
                    'height': 0,
                    'padding-top': 0,
                    'padding-bottom': 0
                });
            }
        },
        fadeslideleftright: { // 淡入淡出左右滚动
            init: function($elem) {
 
                js._custominit($elem, {

                    'opacity': 0,
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            },
            show: function($elem) {

                js._customshow($elem);
            },
            hide: function($elem) {
 
                js._customhide($elem, {
                    'opacity': 0,
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            }
        }
    };

    js._init = function($elem, hiddencallback) {
        $elem.removeclass('transition'); // js和transition动画冲突,在执行js前,将transition去掉,屏蔽风险。
        init($elem, hiddencallback);
    };

    js._custominit = function($elem, options) {
        var styles = {};
        for (var p in options) {
            styles[p] = $elem.css(p);
        }

        $elem.data('styles', styles);

        js._init($elem, function() {
            $elem.css(options);
        });

    };

    js._customshow = function($elem) {
        var styles = $elem.data('styles');
        show($elem, function() {
            $elem.show();
            $elem.stop().animate($elem.data('styles'), function() {
                $elem.data('status', 'shown').trigger('shown');
            });
        });
    };

    js._customhide = function($elem, options) {
        hide($elem, function() {

            $elem.stop().animate(options, function() {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
        });
    };


    js._show = function($elem, mode) {
        show($elem, function() {
            $elem.stop()[mode](function() {
                $elem.data('status', 'shown').trigger('shown');
            });
        });
    };

    js._hide = function($elem, mode) {

        hide($elem, function() {
            $elem.stop()[mode](function() {
                $elem.data('status', 'hidden').trigger('hidden');
            });
        });

    };

    // 动画效果的默认设置
    var defaults = {
        css3: true,
        js: true,
        animation: 'fade'
    };

    function showhide($elem, options) {
        var mode = null;

        if (options.css3 && transition.issupport) { 
            mode = css3[options.animation] || css3[defaults.animation];
          
        } else if (options.js) { 
            mode = js[options.animation] || js[defaults.animation];
        } else { 
            mode = silent;
        }
        mode.init($elem);
        return {
            show: $.proxy(mode.show, this, $elem),
            hide: $.proxy(mode.hide, this, $elem),
        };
    }
    
    $.fn.extend({
        showhide: function (option) {
            return this.each(function () {
                var $this = $(this),
                    options = $.extend({}, defaults, typeof option === 'object' && option),
                    mode = $this.data('showhide');

                if (!mode) {
                    $this.data('showhide', mode = showhide($this, options));
                }

                if (typeof mode[option] === 'function') {
                    mode[option]();
                }
            });
        }
    });

})(jquery);

dropdown.js(下拉组件封装)

(function($) {
    'use strict'

    function dropdown($elem, options) {
        this.$elem = $elem;
            this.options = options;
        this.$layer = this.$elem.find('.dropdown-layer'),
            this.activeclass = options.active + '-active';

        this._init();
    }

    dropdown.defaults = {
        event: "hover",
        css3: true,
        js: true,
        animation: 'fade',
        delay: 0,
        active: 'dropdown'
    };
    dropdown.prototype._init=function () {
        var self=this;
        this.$layer.showhide(this.options);       
        this.$layer.on('show shown hide hidden',function (e) {
            self.$elem.trigger('dropdown-'+e.type);
            
        });

        if (this.options.event === 'click') {
            this.$elem.on('click', function(e) {
                self.show();
                e.stoppropagation();
            });
            $(document).on('click', $.proxy(this.hide, this));

        } else {
            this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));

        }
    }

    dropdown.prototype.show = function() {
        var self = this;
        if (this.options.delay) {
            this.timer = settimeout(function() {
                _show();
            }, this.options.delay);
        } else {
            _show();
        }

        function _show() {
            self.$elem.addclass(self.activeclass);
            self.$layer.showhide('show');
        }

    }

    dropdown.prototype.hide = function() {
        if(this.options.delay){
            cleartimeout(this.timer);

        }
        this.$elem.removeclass(this.activeclass);
        this.$layer.showhide('hide');
    }

    $.fn.extend({
        dropdown: function(option) {
            return this.each(function() {
                
                var $this=$(this),
                dropdown=$this.data('dropdown'),
                options = $.extend({}, dropdown.defaults, $(this).data(), typeof option==='object'&&option);
                // dropdown(this, options);  
                if(!dropdown){//解决多次调用dropdown问题
                    $this.data('dropdown',dropdown=new dropdown($this,options));

                }  

                if(typeof dropdown[option]==='function'){
                    dropdown[option]();

                }

            });

        }
    });


})(jquery);

search.js(搜索框组件封装)

// 面向对象方式实现搜索功能

(function($) {
    'use strict';

     var cache = {
        data: {},
        count: 0,
        adddata: function (key, data) {
            if (!this.data[key]) {
                this.data[key] = data;
                this.count++;
            }
        },
        readdata: function (key) {
            return this.data[key];
        },
        deletedatabykey: function (key) {
            delete this.data[key];
            this.count--;
        },
        deletedatabyorder: function (num) {
            var count = 0;

            for (var p in this.data) {
                if (count >= num) {
                    break;
                }
                count++;
                this.deletedatabykey(p);
            }
        }
    };

    function search($elem, options) {
        this.$elem = $elem;
        this.options = options;

        this.$form = this.$elem.find('.search-form');
        this.$input = this.$elem.find('.search-inputbox');
        this.$layer = this.$elem.find('.search-layer');
        this.loaded = false;
        this.$elem.on('click', '.search-btn', $.proxy(this.submit, this));
        if (this.options.autocomplete) {
            this.autocomplete();
        }

    }
    search.defaults = {
        autocomplete: false,
        url: 'https://suggest.taobao.com/sug?code=utf-8&_ksts=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=',
        css3: false,
        js: false,
        animation: 'fade',
        getdatainterval: 200

    };
    search.prototype.submit = function() {
        if (this.getinputval() === '') {
            return false;
        }
        this.$form.submit();
    };
    search.prototype.autocomplete = function() {
        var timer = null,
            self = this;
        this.$input
            .on('input', function() {
                if (self.options.getdatainterval) {

                    cleartimeout(timer);
                    timer = settimeout(function() {
                        self.getdata();
                    }, self.options.getdatainterval);
                } else {
                    self.getdata();
                }

            })
            .on('focus', $.proxy(this.showlayer, this))
            .on('click', function() {
                return false;
            });

        this.$layer.showhide(this.options);
        $(document).on('click', $.proxy(this.hidelayer, this));
    };

    search.prototype.getdata = function() {
        var self = this;
        var inputval = this.getinputval();
        if (inputval == '') return self.$elem.trigger('search-nodata');
        if(cache.readdata(inputval)) return self.$elem.trigger('search-getdata',[cache.readdata(inputval)]);
        if (this.jqxhr) this.jqxhr.abort();
        this.jqxhr = $.ajax({
            url: this.options.url + inputval,
            datatype: 'jsonp'
        }).done(function(data) {
            console.log(data);
            cache.adddata(inputval, data);
            console.log(cache.data);
            console.log(cache.count);
            self.$elem.trigger('search-getdata', [data]);
        }).fail(function() {
            self.$elem.trigger('search-nodata');
        }).always(function() {
            self.jqxhr = null;
        });

    };
    search.prototype.showlayer = function() {
        if (!this.loaded) return;
        this.$layer.showhide('show');
    };
    search.prototype.hidelayer = function() {
        this.$layer.showhide('hide');
    };

    search.prototype.getinputval = function() {
        return $.trim(this.$input.val());
    };

    search.prototype.setinputval = function(val) {
        this.$input.val(removehtmltags(val));

        function removehtmltags(str) {
            return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g, '');
        }
    };

    search.prototype.appendlayer = function(html) {
        this.$layer.html(html);
        this.loaded = !!html;
    };

    $.fn.extend({
        search: function(option, value) {
            return this.each(function() {

                var $this = $(this),
                    search = $this.data('search'),
                    options = $.extend({}, search.defaults, $(this).data(), typeof option === 'object' && option);

                if (!search) {
                    $this.data('search', search = new search($this, options));

                }

                if (typeof search[option] === 'function') {
                    search[option](value);

                }

            });

        }
    });



})(jquery);

move.js

(function($) {
    'use strict';
    var transition = window.mt.transition;
    var init = function($elem) {
        this.$elem = $elem;
        this.curx = parsefloat(this.$elem.css('left'));
        this.cury = parsefloat(this.$elem.css('top'));

    }

    var to = function(x, y, callback) {
        x = (typeof x === 'number') ? x : this.curx;
        y = (typeof y === 'number') ? y : this.cury;
        if (this.curx === x && this.cury === y) return;

        this.$elem.trigger('move', [this.$elem]);
        if (typeof callback === 'function') {
            callback();
        }

        this.curx = x;
        this.cury = y;

    }

    var silent = function($elem) {
        init.call(this, $elem); //改变this的指向,这里this指外面的this,如不使用call,this指init。
        this.$elem.removeclass('transition');


    };
    silent.prototype.to = function(x, y) {
        var self = this;
        to.call(this, x, y, function() {

            self.$elem.css({
                left: x,
                top: y
            });
            self.$elem.trigger('moved', [self.$elem]);

        });




    };
    silent.prototype.x = function(x) {
        this.to(x);
    };
    silent.prototype.y = function(y) {
        this.to(null, y);

    };

    // css3 方式
    var css3 = function($elem) {
        this.$elem = $elem;
        this.$elem.addclass('transition');
        this.curx = parsefloat(this.$elem.css('left'));
        this.cury = parsefloat(this.$elem.css('top'));
        this.$elem.css({
            left: this.curx,
            top: this.cury
        });

    };

    css3.prototype.to = function(x, y) {
        var self = this;
        to.call(this, x, y, function() {


            self.$elem.off(transition.end).one(transition.end, function() {
                self.$elem.trigger('moved', [self.$elem]);
            });

            self.$elem.css({
                left: x,
                top: y
            });

        });
    };
    css3.prototype.x = function(x) {
        this.to(x);
    };
    css3.prototype.y = function(y) {
        this.to(null, y);
    };


    // js方式
    var js = function($elem) {
        init.call(this, $elem);
        this.$elem.removeclass('transition');

    };

    js.prototype.to = function(x, y) {
        var self = this;
        to.call(this, x, y, function() {
            self.$elem.stop().animate({
                left: x,
                top: y
            }, function() {
                self.$elem.trigger('moved', [self.$elem]);
            });
        });
    };

    js.prototype.x = function(x) {
        this.to(x);

    };
    js.prototype.y = function(y) {
        this.to(null, y);

    };

    var defaults = {
            css3: false,
            js: false
        };

    var move = function ($elem, options) {
        var mode = null;

        if (options.css3 && transition.issupport) { // css3 transition
            mode = new css3($elem);
        } else if (options.js) { // js animation
            mode = new js($elem);
        } else { // no animation
            mode = new silent($elem);
        }

        return {
            to: $.proxy(mode.to, mode), //改变指针this指向mode.
            x: $.proxy(mode.x, mode),
            y: $.proxy(mode.y, mode)
        };
    };

    $.fn.extend({
        move: function (option,x,y) {
            return this.each(function () {
                var $this = $(this),
                    mode = $this.data('move'),
                    options = $.extend({}, defaults, typeof option === 'object' && option);

                if (!mode) { // first time
                    $this.data('move', mode = move($this, options));
                }

                if (typeof mode[option] === 'function') {
                    mode[option](x, y);
                }
            });
        }

    });

})(jquery);

slider.js(轮播海报组件)

(function ($) {
    'use strict';

    function slider($elem, options) {
        this.$elem = $elem;
        this.options = options;

        this.$items = this.$elem.find('.slider-item');
        this.$indicators = this.$elem.find('.slider-indicator');
        this.$controls = this.$elem.find('.slider-control');

        this.itemnum = this.$items.length;
        this.curindex = this._getcorrectindex(this.options.activeindex);

        this._init();
    }
    slider.defaults = {
        css3: false,
        js: false,
        animation: 'fade', // slide
        activeindex: 0,
        interval: 0
    };
    slider.prototype._init = function() {
        var self = this;
        this.$elem.trigger('slider-show',[this.curindex,this.$items[this.curindex]]);

        // init show
        this.$indicators.removeclass('slider-indicator-active');
        this.$indicators.eq(this.curindex).addclass('slider-indicator-active');

        // to
        if (this.options.animation === 'slide') {
            this.$elem.addclass('slider-slide');
            this.$items.eq(this.curindex).css('left', 0);

            // send message
            this.$items.on('move moved', function (e) {
                var index = self.$items.index(this);

                if (e.type === 'move') {
                    if (index === self.curindex) {
                        self.$elem.trigger('slider-hide', [index, this]);
                    } else {
                        self.$elem.trigger('slider-show', [index, this]);
                    }
                } else { // moved
                    if (index === self.curindex) { // 指定的
                        self.$elem.trigger('slider-shown', [index, this]);
                    } else {
                        self.$elem.trigger('slider-hidden', [index, this]);
                    }
                }
            });
            // move init
            this.$items.move(this.options);
            this.to = this._slide;

            this.itemwidth = this.$items.eq(0).width();
            this.transitionclass = this.$items.eq(0).hasclass('transition') ? 'transition' : '';
        } else { // fade
            this.$elem.addclass('slider-fade');
            this.$items.eq(this.curindex).show();

            // send message
            this.$items.on('show shown hide hidden', function (e) {
                self.$elem.trigger('slider-' + e.type, [self.$items.index(this), this]);
            });
            // showhide init
            this.$items.showhide(this.options);
            this.to = this._fade;
        }

        // bind event
        this.$elem
            .hover(function () {
                self.$controls.show();
            }, function () {
                self.$controls.hide();
            })
            .on('click', '.slider-control-left', function () {
                self.to(self._getcorrectindex(self.curindex - 1), 1);
            })
            .on('click', '.slider-control-right', function () {
                self.to(self._getcorrectindex(self.curindex + 1), -1);
            })
            .on('click', '.slider-indicator', function () {
                self.to(self._getcorrectindex(self.$indicators.index(this)));
            });

        // auto
        if (this.options.interval && !isnan(number(this.options.interval))) {
            this.$elem.hover($.proxy(this.pause, this), $.proxy(this.auto, this));
            this.auto();
        }
    };
    slider.prototype._getcorrectindex = function(index) {
        if (isnan(number(index))) return 0;
        if (index < 0) return this.itemnum - 1;
        if (index > this.itemnum - 1) return 0;
        return index;
    };
    slider.prototype._activateindicators = function(index) {
        this.$indicators.eq(this.curindex).removeclass('slider-indicator-active');
        this.$indicators.eq(index).addclass('slider-indicator-active');
    };
    slider.prototype._fade = function(index) {
        if (this.curindex === index) return;

        this.$items.eq(this.curindex).showhide('hide');
        this.$items.eq(index).showhide('show');

        this._activateindicators(index);

        this.curindex = index;
    };
    slider.prototype._slide = function(index, direction) {
        if (this.curindex === index) return;

        var self = this;

        // 确定滑入滑出的方向
        if (!direction) { // click indicators
            if (this.curindex < index) {
                direction = -1;
            } else if (this.curindex > index) {
                direction = 1;
            }
        }

        // 设置指定滑入幻灯片的初始位置
        this.$items.eq(index).removeclass(this.transitionclass).css('left', -1 * direction * this.itemwidth);

        // 当前幻灯片滑出可视区域,指定幻灯片滑入可视区域
        settimeout(function () {
            self.$items.eq(self.curindex).move('x', direction * self.itemwidth);
            self.$items.eq(index).addclass(self.transitionclass).move('x', 0);
            self.curindex = index;
        }, 20);
        
        // 激活indicator
        this._activateindicators(index);
    };
    slider.prototype.auto = function() {
        var self = this;

        this.intervalid = setinterval(function () {
            self.to(self._getcorrectindex(self.curindex + 1), -1);
        }, this.options.interval);
    };
    slider.prototype.pause = function() {
        clearinterval(this.intervalid);
    };

    $.fn.extend({
        slider: function (option) {
            return this.each(function () {
                var $this = $(this),
                    slider = $this.data('slider'),
                    options = $.extend({}, slider.defaults, $this.data(), typeof option === 'object' && option);

                if (!slider) { // first time
                    $this.data('slider', slider = new slider($this, options));
                }

                if (typeof slider[option] === 'function') {
                    slider[option]();
                }
            });
        }
    })
})(jquery);

 

 tab.js(tab选项卡组件)

(function($) {
    'use strict';

    function tab($elem, options) {
        this.$elem = $elem;
        this.options = options;

        this.$items = this.$elem.find('.tab-item');
        this.$panels = this.$elem.find('.tab-panel');

        this.itemnum = this.$items.length;
        this.curindex = this._getcorrectindex(this.options.activeindex);

        this._init();
    }
    tab.defaults = {
        event: 'mouseenter', // click
        css3: false,
        js: false,
        animation: 'fade',
        activeindex: 0,
        interval:0,
        delay:0

    };
    tab.prototype._init = function() {
        var self = this,
            timer=null;

        // init show
        this.$items.removeclass('tab-item-active');
        this.$items.eq(this.curindex).addclass('tab-item-active');
        this.$panels.eq(this.curindex).show();
        this.$elem.trigger('tab-show', [this.curindex, this.$panels[this.curindex]]);


        // trigger event
        this.$panels.on('show shown hide hidden', function(e) {
            self.$elem.trigger('tab-' + e.type, [self.$panels.index(this), this]);
        });

        // showhide init
        this.$panels.showhide(this.options);

        // bind event
        this.options.event = this.options.event === 'click' ? 'click' : 'mouseenter';
        this.$elem.on(this.options.event, '.tab-item', function() {
            var elem=this;
            if (self.options.delay) { // delay
                cleartimeout(timer);
                timer = settimeout(function () {
                    self.toggle(self.$items.index(elem));
                }, self.options.delay);
            } else { // immediate
                self.toggle(self.$items.index(elem));
            }

        });

        // auto
        if (this.options.interval && !isnan(number(this.options.interval))) {
            this.$elem.hover($.proxy(this.pause, this), $.proxy(this.auto, this));
            this.auto();
        }


    };
    tab.prototype._getcorrectindex = function(index) {
        if (isnan(number(index))) return 0;
        if (index < 0) return this.itemnum - 1;
        if (index > this.itemnum - 1) return 0;
        return index;
    };
    tab.prototype.toggle = function(index) {
        if (this.curindex === index) return;

        this.$panels.eq(this.curindex).showhide('hide');
        this.$panels.eq(index).showhide('show');

        this.$items.eq(this.curindex).removeclass('tab-item-active');
        this.$items.eq(index).addclass('tab-item-active');

        this.curindex = index;
    };


    tab.prototype.auto = function() {
        var self = this;

        this.intervalid = setinterval(function () {
            self.toggle(self._getcorrectindex(self.curindex + 1));
        }, this.options.interval);
    };
    tab.prototype.pause = function() {
        clearinterval(this.intervalid);
    };

    $.fn.extend({
        tab: function(option) {
            return this.each(function() {
                var $this = $(this),
                    tab = $this.data('tab'),
                    options = $.extend({}, tab.defaults, $this.data(), typeof option === 'object' && option);

                if (!tab && typeof option !== 'object') return;

                if (!tab) { // first time
                    $this.data('tab', tab = new tab($this, options));
                }

                if (typeof tab[option] === 'function') {
                    tab[option]();
                }
            });
        }
    });
})(jquery);

index.js

(function($) {

    'use strict';
    //menu
    var dropdown = {};
    $('.menu')
        .on('dropdown-show', function(e) {
            dropdown.loadonce($(this), dropdown.buildmenuitem);
        })
        .dropdown({
            css3: true,
            js: false
        });

    dropdown.buildmenuitem = function($elem, data) {

        var html = "";
        if (data.length === 0) return;
        for (var i = 0; i < data.length; i++) {
            html += '<li><a href="' + data[i].url + '" target="_blank" class="menu-item">' + data[i].name + '</a></li>'
        }
        $elem.find('.dropdown-layer').html(html);

    };

    //header search
    var search = {};
    search.$headersearch = $('#header-search');
    search.$headersearch.html = '';
    search.$headersearch.maxnum = 10;

    // 获得数据处理
    search.$headersearch.on('search-getdata', function(e, data) {
        var $this = $(this);
        search.$headersearch.html = search.$headersearch.createheadersearchlayer(data, search.$headersearch.maxnum);
        $this.search('appendlayer', search.$headersearch.html);
        // 将生成的html呈现在页面中        
        if (search.$headersearch.html) {
            $this.search('showlayer');
        } else {
            $this.search('hidelayer');

        }
    }).on('search-nodata', function(e) {
        // 没获得数据处理
        $(this).search('hidelayer').search('appendlayer', '');

    }).on('click', '.search-layer-item', function() {
        // 点击每项时,提交
        search.$headersearch.search('setinputval', $(this).html());
        search.$headersearch.search('submit');
    });

    search.$headersearch.search({
        autocomplete: true,
        css3: false,
        js: false,
        animation: 'fade',
        getdatainterval: 0
    });

    // 获取数据,生成html

    search.$headersearch.createheadersearchlayer = function(data, maxnum) {
        var html = '',
            datanum = data['result'].length;

        if (datanum === 0) {
            return '';
        }
        for (var i = 0; i < datanum; i++) {
            if (i >= maxnum) break;
            html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>';
        }
        return html;

    };

    // focus-category

    $('#focus-category').find('.dropdown')
        .on('dropdown-show', function() {
            dropdown.loadonce($(this), dropdown.createcategorydetails);
        })
        .dropdown({
            css3: false,
            js: false
        });

    dropdown.createcategorydetails = function($elem, data) {
        var html = '';
        for (var i = 0; i < data.length; i++) {
            html += '<dl class="category-details cf"><dt class="category-details-title fl"><a href="###" target="_blank" class="category-details-title-link">' + data[i].title + '</a></dt><dd class="category-details-item fl">';

            for (var j = 0; j < data[i].items.length; j++) {
                html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>';
            }
            html += '</dd></dl>';
        }
        // settimeout(function () {
        $elem.find('.dropdown-layer').html(html);
        // },1000);

    };

    dropdown.loadonce = function($elem, success) {
        var dataload = $elem.data('load');
        if (!dataload) return;
        if (!$elem.data('loaded')) {
            $elem.data('loaded', true);
            $.getjson(dataload).done(function(data) {
                if (typeof success === 'function') success($elem, data);
            }).fail(function() {
                $elem.data('loaded', false);
            });
        }
    };

   // imgloader
    var imgloader = {};
    imgloader.loadimg = function(url, imgloaded, imgfailed) {
        var image = new image();
        image.onerror = function() {
            if (typeof imgfailed === 'function') imgfailed(url);
        }
        image.onload = function() {
            if (typeof imgloaded === 'function') imgloaded(url);
        };
        image.src = url;
    };

    imgloader.loadimgs = function($imgs, success, fail) {        
        
        $imgs.each(function(_, el) { // _ 相当占位,不使用该参数。
            var $img = $(el);
            imgloader.loadimg($img.data('src'), function(url) {
                $img.attr('src', url);
                success();
            }, function(url) {
                console.log('从' + url + '加载图片失败');
                fail($img, url);
            });
        });
    }

    //lazyload

    var lazyload = {};

    lazyload.loaduntil = function(options) {

        var items = {},
            loadeditemnum = 0,
            loaditemfn = null,
            $elem = options.$container,
            id = options.id
        // 什么时候开始加载
        $elem.on(options.triggerevent, loaditemfn = function(e, index, elem) {
            if (items[index] !== 'loaded') {
                $elem.trigger(id + '-loaditem', [index, elem, function() {
                    items[index] = 'loaded';
                    loadeditemnum++;
                    console.log(index + ': loaded');
                    if (loadeditemnum === options.totalitemnum) {
                        // 全部加载完毕
                        $elem.trigger(id + '-itemsloaded');
                    }
                }]);
            }
        });

        //加载完毕
        $elem.on(id + '-itemsloaded', function(e) {
            console.log(id + '-itemsloaded');
            // 清除事件
            $elem.off(options.triggerevent, loaditemfn);
        });

    }

    lazyload.isvisible = function(offsettop,height) {
        var $win = browser.$win;
        return ($win.height() + $win.scrolltop() > offsettop) && ($win.scrolltop() < offsettop + height)
    }


    // foucs-slider
    var slider = {};
    slider.$focusslider = $('#focus-slider');
    
    slider.$focusslider.on('focus-loaditem', function(e, index, elem, success) {

        imgloader.loadimgs($(elem).find('.slider-img'), success, function($img, url) {
            $img.attr('src', 'img/focus-slider/placeholder.png');
        });
    });

    lazyload.loaduntil({
        $container: slider.$focusslider,
        totalitemnum: slider.$focusslider.find('.slider-img').length,
        triggerevent: 'slider-show',
        id: 'focus'
    });


    slider.$focusslider.slider({
        css3: true,
        js: false,
        animation: 'fade', // fade  slide
        activeindex: 0,
        interval: 0
    });


    // todays-slider   
    slider.$todaysslider = $('#todays-slider');
    
    slider.$todaysslider.on('todays-loaditem', function(e, index, elem, success) {

        imgloader.loadimgs($(elem).find('.slider-img'), success, function($img, url) {
            $img.attr('src', 'img/todays-slider/placeholder.png');
        });
    });

    lazyload.loaduntil({
        $container: slider.$todaysslider,
        totalitemnum: slider.$todaysslider.find('.slider-img').length,
        triggerevent: 'slider-show',
        id: 'todays'
    });

    slider.$todaysslider.slider({
        css3: true,
        js: false,
        animation: 'fade', // fade  slide
        activeindex: 0,
        interval: 0
    });


//floor
    var floor = {};
    floor.$floor = $('.floor');


    floor.floordata = [{
        num: '1',
        text: '服装鞋包',
        tabs: ['大牌', '男装', '女装'],
        offsettop: floor.$floor.eq(0).offset().top,
        height: floor.$floor.eq(0).height(),
        items: [
            [{
                name: '匡威男棒球开衫外套2015',
                price: 479
            }, {
                name: 'adidas 阿迪达斯 训练 男子',
                price: 335
            }, {
                name: '必迈bmai一体织跑步短袖t恤',
                price: 159
            }, {
                name: 'nba袜子半毛圈运动高邦棉袜',
                price: 65
            }, {
                name: '特步官方运动帽男女帽子2016',
                price: 69
            }, {
                name: 'kelme足球训练防寒防风手套',
                price: 4999
            }, {
                name: '战地吉普三合一冲锋衣',
                price: 289
            }, {
                name: '探路者户外男士徒步鞋',
                price: 369
            }, {
                name: '羽绒服2015秋冬新款轻薄男士',
                price: 399
            }, {
                name: '溯溪鞋涉水鞋户外鞋',
                price: 689
            }, {
                name: '旅行背包多功能双肩背包',
                price: 269
            }, {
                name: '户外旅行双肩背包os0099',
                price: 99
            }],
            [{
                name: '匡威男棒球开衫外套2015',
                price: 479
            }, {
                name: 'adidas 阿迪达斯 训练 男子',
                price: 335
            }, {
                name: '必迈bmai一体织跑步短袖t恤',
                price: 159
            }, {
                name: 'nba袜子半毛圈运动高邦棉袜',
                price: 65
            }, {
                name: '特步官方运动帽男女帽子2016',
                price: 69
            }, {
                name: 'kelme足球训练防寒防风手套',
                price: 4999
            }, {
                name: '战地吉普三合一冲锋衣',
                price: 289
            }, {
                name: '探路者户外男士徒步鞋',
                price: 369
            }, {
                name: '羽绒服2015秋冬新款轻薄男士',
                price: 399
            }, {
                name: '溯溪鞋涉水鞋户外鞋',
                price: 689
            }, {
                name: '旅行背包多功能双肩背包',
                price: 269
            }, {
                name: '户外旅行双肩背包os0099',
                price: 99
            }],
            [{
                name: '匡威男棒球开衫外套2015',
                price: 479
            }, {
                name: 'adidas 阿迪达斯 训练 男子',
                price: 335
            }, {
                name: '必迈bmai一体织跑步短袖t恤',
                price: 159
            }, {
                name: 'nba袜子半毛圈运动高邦棉袜',
                price: 65
            }, {
                name: '特步官方运动帽男女帽子2016',
                price: 69
            }, {
                name: 'kelme足球训练防寒防风手套',
                price: 4999
            }, {
                name: '战地吉普三合一冲锋衣',
                price: 289
            }, {
                name: '探路者户外男士徒步鞋',
                price: 369
            }, {
                name: '羽绒服2015秋冬新款轻薄男士',
                price: 399
            }, {
                name: '溯溪鞋涉水鞋户外鞋',
                price: 689
            }, {
                name: '旅行背包多功能双肩背包',
                price: 269
            }, {
                name: '户外旅行双肩背包os0099',
                price: 99
            }]
        ]
    }, {
        num: '2',
        text: '个护美妆',
        tabs: ['热门', '国际大牌', '国际名品'],
        offsettop: floor.$floor.eq(1).offset().top,
        height: floor.$floor.eq(1).height(),
        items: [
            [{
                name: '韩束红石榴鲜活水盈七件套装',
                price: 169
            }, {
                name: '温碧泉八杯水亲亲水润五件套装',
                price: 198
            }, {
                name: '御泥坊红酒透亮矿物蚕丝面膜贴',
                price: 79.9
            }, {
                name: '吉列手动剃须刀锋隐致护',
                price: 228
            }, {
                name: 'mediheal水润保湿面膜',
                price: 119
            }, {
                name: '纳益其尔芦荟舒缓保湿凝胶',
                price: 39
            }, {
                name: '宝拉珍选基础护肤旅行四件套',
                price: 299
            }, {
                name: '温碧泉透芯润五件套装',
                price: 257
            }, {
                name: '玉兰油多效修护三部曲套装',
                price: 199
            }, {
                name: 'loreal火山岩控油清痘洁面膏',
                price: 36
            }, {
                name: '百雀羚水嫩倍现盈透精华水',
                price: 139
            }, {
                name: '珀莱雅新柔皙莹润三件套',
                price: 99
            }],
            [{
                name: '韩束红石榴鲜活水盈七件套装',
                price: 169
            }, {
                name: '温碧泉八杯水亲亲水润五件套装',
                price: 198
            }, {
                name: '御泥坊红酒透亮矿物蚕丝面膜贴',
                price: 79.9
            }, {
                name: '吉列手动剃须刀锋隐致护',
                price: 228
            }, {
                name: 'mediheal水润保湿面膜',
                price: 119
            }, {
                name: '纳益其尔芦荟舒缓保湿凝胶',
                price: 39
            }, {
                name: '宝拉珍选基础护肤旅行四件套',
                price: 299
            }, {
                name: '温碧泉透芯润五件套装',
                price: 257
            }, {
                name: '玉兰油多效修护三部曲套装',
                price: 199
            }, {
                name: 'loreal火山岩控油清痘洁面膏',
                price: 36
            }, {
                name: '百雀羚水嫩倍现盈透精华水',
                price: 139
            }, {
                name: '珀莱雅新柔皙莹润三件套',
                price: 99
            }],
            [{
                name: '韩束红石榴鲜活水盈七件套装',
                price: 169
            }, {
                name: '温碧泉八杯水亲亲水润五件套装',
                price: 198
            }, {
                name: '御泥坊红酒透亮矿物蚕丝面膜贴',
                price: 79.9
            }, {
                name: '吉列手动剃须刀锋隐致护',
                price: 228
            }, {
                name: 'mediheal水润保湿面膜',
                price: 119
            }, {
                name: '纳益其尔芦荟舒缓保湿凝胶',
                price: 39
            }, {
                name: '宝拉珍选基础护肤旅行四件套',
                price: 299
            }, {
                name: '温碧泉透芯润五件套装',
                price: 257
            }, {
                name: '玉兰油多效修护三部曲套装',
                price: 199
            }, {
                name: 'loreal火山岩控油清痘洁面膏',
                price: 36
            }, {
                name: '百雀羚水嫩倍现盈透精华水',
                price: 139
            }, {
                name: '珀莱雅新柔皙莹润三件套',
                price: 99
            }]
        ]
    }, {
        num: '3',
        text: '手机通讯',
        tabs: ['热门', '品质优选', '新机尝鲜'],
        offsettop: floor.$floor.eq(2).offset().top,
        height: floor.$floor.eq(2).height(),
        items: [
            [{
                name: '摩托罗拉 moto z play',
                price: 3999
            }, {
                name: 'apple iphone 7 (a1660)',
                price: 6188
            }, {
                name: '小米 note 全网通 白色',
                price: 999
            }, {
                name: '小米5 全网通 标准版 3gb内存',
                price: 1999
            }, {
                name: '荣耀7i 海岛蓝 移动联通4g手机',
                price: 1099
            }, {
                name: '乐视(le)乐2(x620)32gb',
                price: 1099
            }, {
                name: 'oppo r9 4gb+64gb内存版',
                price: 2499
            }, {
                name: '魅蓝note3 全网通公开版',
                price: 899
            }, {
                name: '飞利浦 x818 香槟金 全网通4g',
                price: 1998
            }, {
                name: '三星 galaxy s7(g9300)',
                price: 4088
            }, {
                name: '华为 荣耀7 双卡双待双通',
                price: 1128
            }, {
                name: '努比亚(nubia)z7max(nx505j)',
                price: 728
            }],
            [{
                name: '摩托罗拉 moto z play',
                price: 3999
            }, {
                name: 'apple iphone 7 (a1660)',
                price: 6188
            }, {
                name: '小米 note 全网通 白色',
                price: 999
            }, {
                name: '小米5 全网通 标准版 3gb内存',
                price: 1999
            }, {
                name: '荣耀7i 海岛蓝 移动联通4g手机',
                price: 1099
            }, {
                name: '乐视(le)乐2(x620)32gb',
                price: 1099
            }, {
                name: 'oppo r9 4gb+64gb内存版',
                price: 2499
            }, {
                name: '魅蓝note3 全网通公开版',
                price: 899
            }, {
                name: '飞利浦 x818 香槟金 全网通4g',
                price: 1998
            }, {
                name: '三星 galaxy s7(g9300)',
                price: 4088
            }, {
                name: '华为 荣耀7 双卡双待双通',
                price: 1128
            }, {
                name: '努比亚(nubia)z7max(nx505j)',
                price: 728
            }],
            [{
                name: '摩托罗拉 moto z play',
                price: 3999
            }, {
                name: 'apple iphone 7 (a1660)',
                price: 6188
            }, {
                name: '小米 note 全网通 白色',
                price: 999
            }, {
                name: '小米5 全网通 标准版 3gb内存',
                price: 1999
            }, {
                name: '荣耀7i 海岛蓝 移动联通4g手机',
                price: 1099
            }, {
                name: '乐视(le)乐2(x620)32gb',
                price: 1099
            }, {
                name: 'oppo r9 4gb+64gb内存版',
                price: 2499
            }, {
                name: '魅蓝note3 全网通公开版',
                price: 899
            }, {
                name: '飞利浦 x818 香槟金 全网通4g',
                price: 1998
            }, {
                name: '三星 galaxy s7(g9300)',
                price: 4088
            }, {
                name: '华为 荣耀7 双卡双待双通',
                price: 1128
            }, {
                name: '努比亚(nubia)z7max(nx505j)',
                price: 728
            }]
        ]
    }, {
        num: '4',
        text: '家用电器',
        tabs: ['热门', '大家电', '生活电器'],
        offsettop: floor.$floor.eq(3).offset().top,
        height: floor.$floor.eq(3).height(),
        items: [
            [{
                name: '暴风tv 超体电视 40x 40英寸',
                price: 1299
            }, {
                name: '小米(mi)l55m5-aa 55英寸',
                price: 3699
            }, {
                name: '飞利浦htd5580/93 音响',
                price: 2999
            }, {
                name: '金门子h108 5.1套装音响组合',
                price: 1198
            }, {
                name: '方太enjoy云魔方抽油烟机',
                price: 4390
            }, {
                name: '美的60升预约洗浴电热水器',
                price: 1099
            }, {
                name: '九阳电饭煲多功能智能电饭锅',
                price: 159
            }, {
                name: '美的电烤箱家用大容量',
                price: 329
            }, {
                name: '奥克斯(aux)936破壁料理机',
                price: 1599
            }, {
                name: '飞利浦面条机 hr2356/31',
                price: 665
            }, {
                name: '松下nu-ja100w 家用蒸烤箱',
                price: 1799
            }, {
                name: '飞利浦咖啡机 hd7751/00',
                price: 1299
            }],
            [{
                name: '暴风tv 超体电视 40x 40英寸',
                price: 1299
            }, {
                name: '小米(mi)l55m5-aa 55英寸',
                price: 3699
            }, {
                name: '飞利浦htd5580/93 音响',
                price: 2999
            }, {
                name: '金门子h108 5.1套装音响组合',
                price: 1198
            }, {
                name: '方太enjoy云魔方抽油烟机',
                price: 4390
            }, {
                name: '美的60升预约洗浴电热水器',
                price: 1099
            }, {
                name: '九阳电饭煲多功能智能电饭锅',
                price: 159
            }, {
                name: '美的电烤箱家用大容量',
                price: 329
            }, {
                name: '奥克斯(aux)936破壁料理机',
                price: 1599
            }, {
                name: '飞利浦面条机 hr2356/31',
                price: 665
            }, {
                name: '松下nu-ja100w 家用蒸烤箱',
                price: 1799
            }, {
                name: '飞利浦咖啡机 hd7751/00',
                price: 1299
            }],
            [{
                name: '暴风tv 超体电视 40x 40英寸',
                price: 1299
            }, {
                name: '小米(mi)l55m5-aa 55英寸',
                price: 3699
            }, {
                name: '飞利浦htd5580/93 音响',
                price: 2999
            }, {
                name: '金门子h108 5.1套装音响组合',
                price: 1198
            }, {
                name: '方太enjoy云魔方抽油烟机',
                price: 4390
            }, {
                name: '美的60升预约洗浴电热水器',
                price: 1099
            }, {
                name: '九阳电饭煲多功能智能电饭锅',
                price: 159
            }, {
                name: '美的电烤箱家用大容量',
                price: 329
            }, {
                name: '奥克斯(aux)936破壁料理机',
                price: 1599
            }, {
                name: '飞利浦面条机 hr2356/31',
                price: 665
            }, {
                name: '松下nu-ja100w 家用蒸烤箱',
                price: 1799
            }, {
                name: '飞利浦咖啡机 hd7751/00',
                price: 1299
            }]
        ]
    }, {
        num: '5',
        text: '电脑数码',
        tabs: ['热门', '电脑/平板', '潮流影音'],
        offsettop: floor.$floor.eq(4).offset().top,
        height: floor.$floor.eq(4).height(),
        items: [
            [{
                name: '戴尔成就vostro 3800-r6308',
                price: 2999
            }, {
                name: '联想ideacentre c560',
                price: 5399
            }, {
                name: '惠普260-p039cn台式电脑',
                price: 3099
            }, {
                name: '华硕飞行堡垒旗舰版fx-pro',
                price: 6599
            }, {
                name: '惠普(hp)暗影精灵ii代plus',
                price: 12999
            }, {
                name: '联想(lenovo)小新700电竞版',
                price: 5999
            }, {
                name: '游戏背光牧马人机械手感键盘',
                price: 499
            }, {
                name: '罗技ik1200背光键盘保护套',
                price: 799
            }, {
                name: '西部数据2.5英寸移动硬盘1tb',
                price: 419
            }, {
                name: '新睿翼3tb 2.5英寸 移动硬盘',
                price: 849
            }, {
                name: 'rii mini i28无线迷你键盘鼠标',
                price: 349
            }, {
                name: '罗技g29 力反馈游戏方向盘',
                price: 2999
            }],
            [{
                name: '戴尔成就vostro 3800-r6308',
                price: 2999
            }, {
                name: '联想ideacentre c560',
                price: 5399
            }, {
                name: '惠普260-p039cn台式电脑',
                price: 3099
            }, {
                name: '华硕飞行堡垒旗舰版fx-pro',
                price: 6599
            }, {
                name: '惠普(hp)暗影精灵ii代plus',
                price: 12999
            }, {
                name: '联想(lenovo)小新700电竞版',
                price: 5999
            }, {
                name: '游戏背光牧马人机械手感键盘',
                price: 499
            }, {
                name: '罗技ik1200背光键盘保护套',
                price: 799
            }, {
                name: '西部数据2.5英寸移动硬盘1tb',
                price: 419
            }, {
                name: '新睿翼3tb 2.5英寸 移动硬盘',
                price: 849
            }, {
                name: 'rii mini i28无线迷你键盘鼠标',
                price: 349
            }, {
                name: '罗技g29 力反馈游戏方向盘',
                price: 2999
            }],
            [{
                name: '戴尔成就vostro 3800-r6308',
                price: 2999
            }, {
                name: '联想ideacentre c560',
                price: 5399
            }, {
                name: '惠普260-p039cn台式电脑',
                price: 3099
            }, {
                name: '华硕飞行堡垒旗舰版fx-pro',
                price: 6599
            }, {
                name: '惠普(hp)暗影精灵ii代plus',
                price: 12999
            }, {
                name: '联想(lenovo)小新700电竞版',
                price: 5999
            }, {
                name: '游戏背光牧马人机械手感键盘',
                price: 499
            }, {
                name: '罗技ik1200背光键盘保护套',
                price: 799
            }, {
                name: '西部数据2.5英寸移动硬盘1tb',
                price: 419
            }, {
                name: '新睿翼3tb 2.5英寸 移动硬盘',
                price: 849
            }, {
                name: 'rii mini i28无线迷你键盘鼠标',
                price: 349
            }, {
                name: '罗技g29 力反馈游戏方向盘',
                price: 2999
            }]
        ]
    }];


    floor.buildfloor = function(floordata) {
        var html = '';

        html += '<div class="container">';
        html += floor.buildfloorhead(floordata);
        html += floor.buildfloorbody(floordata);
        html += '</div>';

        return html;
    };

    floor.buildfloorhead = function(floordata) {
        var html = '';
        html += '<div class="floor-head">';
        html += '<h2 class="floor-title fl"><span class="floor-title-num">' + floordata.num + 'f</span><span class="floor-title-text">' + floordata.text + '</span></h2>';
        html += '<ul class="tab-item-wrap fr">';
        for (var i = 0; i < floordata.tabs.length; i++) {
            html += '<li class="fl"><a href="javascript:;" class="tab-item">' + floordata.tabs[i] + '</a></li>';
            if (i !== floordata.tabs.length - 1) {
                html += '<li class="floor-divider fl text-hidden">分隔线</li>';
            }
        }
        html += '</ul>';
        html += '</div>';
        return html;
    };

    floor.buildfloorbody = function(floordata) {
        var html = '';
        html += '<div class="floor-body">';
        for (var i = 0; i < floordata.items.length; i++) {
            html += '<ul class="tab-panel">';
            for (var j = 0; j < floordata.items[i].length; j++) {
                html += '<li class="floor-item fl">';
                html += '<p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/loading.gif" class="floor-img" data-src="img/floor/' + floordata.num + '/' + (i + 1) + '/' + (j + 1) + '.png" alt="" /></a></p>';
                html += '<p class="floor-item-name"><a href="###" target="_blank" class="link">' + floordata.items[i][j].name + '</a></p>';
                html += '<p class="floor-item-price">' + floordata.items[i][j].price + '</p>';
                html += '</li>';
            }

            html += '</ul>';
        }

        html += '</div>';

        return html;
    };

    var browser={};    

    browser.$win = $(window);
    browser.$doc = $(document);

    
    floor.timetoshow = function() {
        console.log('time to show');
        floor.$floor.each(function(index, elem) {
            if (lazyload.isvisible(floor.floordata[index].offsettop,floor.floordata[index].height)) {
                browser.$doc.trigger('floor-show', [index, elem]);
            }
        });
    }

    browser.$win.on('scroll resize', floor.showfloor=function () {
        cleartimeout(floor.floortimer);
        floor.floortimer=settimeout(floor.timetoshow,250);
    });

    floor.$floor.on('floor-loaditem', function(e, index, elem, success) {

        imgloader.loadimgs($(elem).find('.floor-img'), success, function($img, url) {
            $img.attr('src', 'img/floor.placeholder.png');
        });
    });

    browser.$doc.on('floors-loaditem', function(e, index, elem, success) {

        var html = floor.buildfloor(floor.floordata[index]),
            $elem = $(elem);
        success();
            $elem.html(html);
            lazyload.loaduntil({
                $container: $elem,
                totalitemnum: $elem.find('.floor-img').length,
                triggerevent: 'tab-show',
                id: 'floor'
            });
            $elem.tab({
                event: 'mouseenter', // mouseenter或click
                css3: false,
                js: false,
                animation: 'fade',
                activeindex: 0,
                interval: 0,
                delay: 0
            });

    });

    browser.$doc.on('floors-itemsloaded', function() {
        browser.$win.off('scroll resize', floor.showfloor);
    });

    lazyload.loaduntil({
        $container: browser.$doc,
        totalitemnum: floor.$floor.length,
        triggerevent: 'floor-show',
        id: 'floors'
    });

    floor.timetoshow();


// elevator
    floor.whichfloor = function () {
        var num = -1;

        floor.$floor.each(function (index, elem) {
            var floordata = floor.floordata[index];

            num = index;

            if (browser.$win.scrolltop()+browser.$win.height()/2 < floordata.offsettop) {
                num = index - 1;
                return false;
            }
        });

        return num;
    };
    console.log(floor.whichfloor());

    floor.$elevator = $('#elevator');
    floor.$elevator.$items = floor.$elevator.find('.elevator-item');
    floor.setelevator = function () {
        var num = floor.whichfloor();

        if (num === -1) { // hide
            floor.$elevator.fadeout();
        } else { // show
            floor.$elevator.fadein();
            floor.$elevator.$items.removeclass('elevator-active');
            floor.$elevator.$items.eq(num).addclass('elevator-active');
        }
    };

    floor.setelevator();

    browser.$win.on('scroll resize', function () {
        cleartimeout(floor.elevatortimer);
        floor.elevatortimer = settimeout(floor.setelevator, 250);
    });

    floor.$elevator.on('click', '.elevator-item', function () {
        $('html, body').animate({
            scrolltop: floor.floordata[$(this).index()].offsettop
        });
    });

    $('#backtotop').on('click', function () {
        $('html, body').animate({
            scrolltop: 0
        });
    });


})(jquery);

json数据就不贴出了……