Jquery开发电商网站实战（带源码）
组件化思想，包含：
下拉菜单项封装 + 按需加载
搜索功能组件化，显示数据 + 下拉显示 + 缓存
分类导航按需加载
幻灯片效果组件封装及按需加载
商品楼层模块组件化 + 商品数据按需加载 + Tab选项卡 + 电梯结构
是时候放出大长图了！！！
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"></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"></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"></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"></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"></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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">></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"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></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">更多 ></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"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">机票</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">电影票</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">游戏</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">彩票</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">加油卡</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">酒店</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">火车票</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">众筹</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">理财</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">礼品卡</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></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"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></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"></i>
<span class="toolbar-text transition">会员</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">购物车</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">我的关注</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">我的消息</span>
</a>
<a href="javascript:;" id="backToTop" class="toolbar-item">
<i class="toolbar-icon icon"></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:;
margin:;
} /*重置默认样式*/
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:;
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:;
}
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:;
}
.dropdown-arrow {
display: inline-block;
line-height:;
/*background-repeat: no-repeat;*/
vertical-align: middle;
}
.dropdown-layer {
display: none;
position: absolute;
z-index:;
}
.dropdown-left {
left:;
right: auto;
}
.dropdown-right {
right:;
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:;
}
.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:;
}
.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:;
}
.slider-control-right {
right:;
}
.slider-fade .slider-item {
display: none;
position: absolute;
top:;
left:;
width: 100%;
height: 100%;
}
.slider-slide .slider-item {
position: absolute;
top:;
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:;
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:;
border: 1px solid #cdd0d4;
}
.dropdown-left{
left:;
right:auto; }
.dropdown-right{
right:;
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:;
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:;
} .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:;
right:;
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:;
display: block;
background-color: #b7bbbf;
font-size: 30px;
}
.toolbar-text {
position: absolute;
left:;
top:;
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数据就不贴出了……
Jquery开发电商网站实战（带源码）的更多相关文章
- 点菜网---Java开源生鲜电商平台-技术选型(源码可下载)
点菜网---Java开源生鲜电商平台-技术选型(源码可下载) 1.内容简介 点菜网目前选用的是最流行的微服务架构模式,采用前后端分离的开发模式,具备高可用,高负载,支持千万级别的数据量的请求. 2. ...
- 利用jquery实现电商网站常用特效之：五星评分
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...
- 一个基于php+mysql的外卖订餐网站（带源码）
订饭组 一个基于php+mysql的外卖订餐网站,包括前端和后台.源码地址 源码演示地址:http://dingfanzu.com 商家后台系统:http://dingfanzu.com/admin ...
- MVC 6 电商网站开发实战
[原创] ASP.NET 5系列教程 (六): 在 MVC6 中创建 Web API 标签: Web API MVC6 创建web API | 博主:powertoolsteam ASP.NE ...
- Django项目之Web端电商网站的实战开发（一）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录 一丶项目介绍 二丶电商项目开发流程 三丶项目需求 四丶项目架构概览 五丶项目数据库设计 六丶项目框架搭建 一丶项目介绍 产品 ...
- Java生鲜电商平台-电商中海量搜索ElasticSearch架构设计实战与源码解析
Java生鲜电商平台-电商中海量搜索ElasticSearch架构设计实战与源码解析 生鲜电商搜索引擎的特点 众所周知,标准的搜索引擎主要分成三个大的部分,第一步是爬虫系统,第二步是数据分析,第三步才 ...
- 电商网站jQuery放大镜代码
分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线 ...
- 项目实战2—实现基于LVS负载均衡集群的电商网站架构
负载均衡集群企业级应用实战-LVS 实现基于LVS负载均衡集群的电商网站架构 背景:随着业务的发展,网站的访问量越来越大,网站访问量已经从原来的1000QPS,变为3000QPS,网站已经不堪重负,响 ...
- PHP实现日志处理类库 - 【微信开发之微电商网站】技术笔记之二
继上篇文章[微信开发之微电商网站]技术笔记之一,昨日做了日志处理的功能. 对于现在的应用程序来说,日志的重要性是不言而喻的.很难想象没有任何日志记录功能的应用程序运行在生产环境中.日志所能提供的功能是 ...
随机推荐
- python中元类(metaclass)的理解
原文地址:http://www.cnblogs.com/tkqasn/p/6524879.html 一:类也是对象 类就是一组用来描述如何生成一个对象的代码. 类也是一个对象,只要你使用关键字clas ...
- python练习——第3题
原GitHub地址:https://github.com/Yixiaohan/show-me-the-code 题目:将 0001 题生成的 200 个激活码(或者优惠券)保存到 Redis 非关系型 ...
- Oracle 12C In-Memory特性研究
Oracle 12C In-Memory特性研究一.Oracle In-Memory1.1 In-Memory 开启方法1.2 开启与关闭IM column store1.3 inmemory优先级调 ...
- 入侵检测基本准则（Basic principles of intrusion detection）【v1.0】
所谓“入侵检测”,顾名思义,就是对入侵行为的发觉.他通过对计算机网络或计算机系统中若干关键点收集信息并对其进行分析,从中发现网络或系统中是否有违反安全策略的行为和被攻击的迹象.” 但实际上,所谓的“违 ...
- JAVA ReentrantLock的使用
源码如下 对比synchronized,synchronized使用时会显示的指定一个对象(方法为调用对象,代码块会需要对象作为参数),来获取一个对象的独占锁 而ReentrantLock可能就是使用 ...
- Java类的加载过程与ClassLoader的理解及测试
当程序准备运行某个类,但该类还未被加载到内存中时,会经过以下三个步骤进行类的加载: 类的加载(Load)→类的连接(Link)→类的初始化(Initialize) 加载:类经过javac.exe编译的 ...
- C#开源组件DocX处理Word文档基本操作(一)
C#中处理Word文档,是大部分程序猿绕不过的一道门.小公司或一般人员会选择使用开源组件.目前网络上出现的帖子,大部分是NPOI与DocX,其它的也有.不啰嗦了,将要使用DocX的基本方法贴出来,供参 ...
- Python编程：从入门到实践——【作业】——第六章（字典）
第六章作业 6-1 人 : 使用一个字典来存储一个熟人的信息, 包括名. 姓. 年龄和居住的城市. 该字典应包含键first_name . last_name . age 和city . 将存储在该字 ...
- [Linux-CentOS7]yum清华源CentOS7
shell直接运行 cat > 01.yumrepo.sh << 'EOF' # 创建备份路径 mkdir -p /etc/yum.repos.d/repo.bak/ # 备份源 m ...
- centos7使用MySQL的Yum存储库安装mysql5.6.45
注意:这个MySQL5.6.45版本有问题,修改配置文件不生效,推荐安装MySQL5.6.43 下载yum源 官网地址:http://dev.mysql.com/downloads/repo/yum/ ...