Jquery开发电商网站实战(带源码)
程序员文章站
2022-03-21 17:15:53
组件化思想,包含: 下拉菜单项封装 + 按需加载 搜索功能组件化,显示数据 + 下拉显示 + 缓存 分类导航按需加载 幻灯片效果组件封装及按需加载 商品楼层模块组件化 + 商品数据按需加载 + Tab选项卡 + 电梯结构 是时候放出大长图了!!! index.html ......
组件化思想,包含:
下拉菜单项封装 + 按需加载
搜索功能组件化,显示数据 + 下拉显示 + 缓存
分类导航按需加载
幻灯片效果组件封装及按需加载
商品楼层模块组件化 + 商品数据按需加载 + 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: 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数据就不贴出了……
上一篇: 韭菜吃法你知道多少呢
下一篇: ES6扩展