组件化思想，包含：
下拉菜单项封装 + 按需加载
搜索功能组件化，显示数据 + 下拉显示 + 缓存
分类导航按需加载
幻灯片效果组件封装及按需加载
商品楼层模块组件化 + 商品数据按需加载 + Tab选项卡 + 电梯结构
是时候放出大长图了！！！
index.html
<!DOCTYPE html> <html lang="zh-CN"> head> meta charset="UTF-8"title>demo</link rel="stylesheet" href="css/base.css" /> ="css/common.css" ="css/index.css" /> body<!-- 站点导航开始 --> div class="nav-site"> ="container"> ul ="fl"> li ><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录a></li="nav-site-signup"="nav-site-signup link">免费注册="###" target="_blank"="nav-site-mobile link">手机逛XX网ul="fr"="menu dropdown fl" data-active="menu"> ="dropdown-toggle link transition">我的XXi ="dropdown-arrow icon transition">i="dropdown-layer dropdown-left"> ="menu-item">已买到的宝贝>我的足迹="dropdown-toggle link transition">收藏夹>收藏的宝贝>收藏的店铺="nav-site-category link">商品分类="menu" data-load="js/dropdown-seller.json">卖家中心="dropdown-loading"="nav-site-service menu dropdown fl">联系客服="dropdown-layer dropdown-right">消费者客服>卖家客服div 站点导航结束 header区开始 ="header"h1 ="./index.html"="header-logo text-hidden">XX网h1id="header-search"="search fl"form action="https://s.taobao.com/search"="search-form"input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off"="search-inputbox fl" /> ="submit" value="搜索"="search-btn btn fl" /> form="search-layer"="search-layer-item text-ellipsis">111> 中心部分导航 ="nav-main"="link">数码城a >天黑黑>团购>发现>二手特价>名品汇="focus"="focus-category"="category fl"="category-title"="icon">="category-list"="dropdown"="category"="js/category-detail-1.json"="dropdown-toggle"> ="dropdown-link">家用电器="dropdown-arrow">>="dropdown-layer"="js/category-detail-2.json">手机a >、>运营商>数码="js/category-detail-3.json">电脑>办公="js/category-detail-4.json">家居>家具>家装>厨具="js/category-detail-5.json">男装>女装>童装>内衣="js/category-detail-6.json">化妆>清洁>宠物="js/category-detail-7.json">运动户外>钟表="js/category-detail-8.json">汽车>汽车用品="js/category-detail-9.json">母婴>玩具乐器="js/category-detail-10.json">食品>酒类>生鲜>特产="js/category-detail-11.json">医药保健="js/category-detail-12.json">图书>音像>电子书="js/category-detail-13.json">彩票>旅行>充值>票务="js/category-detail-14.json">理财>众筹>白条>保险="focus-slider"="slider fl"="slider-container"="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> --> ="_blank"img src="img/focus-slider/loading.gif" data-src="img/focus-slider/1.png" alt=""="slider-img" /></="img/focus-slider/2.png"="img/focus-slider/3.png"="img/focus-slider/4.png"ol ="slider-indicator-wrap"="slider-indicator text-hidden fl">1>2>3>4ol="slider-control slider-control-left"<="slider-control slider-control-right"="focus-sidebar fr"="focus-news"="focus-news-head"h2 ="focus-news-title fl">XX快报h2="link fr">更多 ="focus-news-body"p ="text-ellipsis"strong>[特惠]> 精选图书每满150减50p>[公告]> 因广州图书仓搬仓升级配送延迟> 爆款手机12期免息> 广东、福建受台风影响配送延迟> 大闸蟹领券满399减180="focus-service cf"="focus-service-item fl"="icon focus-service-icon">span ="focus-service-text">话费span>>机票>>电影票>>游戏>>>加油卡>>酒店>>火车票>>>>礼品卡>="focus-ad"> ="todays"="todays-slider"="slider"="img/todays-slider/loading.gif"="img/todays-slider/1.png"="img/todays-slider/2.png"="img/todays-slider/3.png"="img/todays-slider/4.png"="img/todays-slider/5.png"="img/todays-slider/6.png"="img/todays-slider/7.png"="img/todays-slider/8.png"="img/todays-slider/9.png"="img/todays-slider/10.png"="img/todays-slider/11.png" floor-1 ="floor"="img/floor-loading.gif"="" /> floor2 floor3 > /> floor4 > /> floor5 ="floor floor-last" elevator ="elevator"="elevator container"="elevator-item"="elevator-num">F1="elevator-text">服饰>F2>美妆>F3>F4>家电>F5> ="toolbar"="toolbar-item"="toolbar-icon icon">="toolbar-text transition">会员>>购物车>>我的关注>>我的消息="backToTop">>顶部script> //两种判断是否有jquery库的写法： window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>') window.jQuery || document.write('<script src="js/jquery.js"><\/script>); script ="js/transition.js"="js/showhide.js"="js/dropdown.js"="js/search.js"="js/move.js"="js/slider.js"="js/tab.js"="js/index.js"html>
base.css
/*css reset*/ 清除内外边距*/ body,h1,h2,h3,h4,h5,h6,p,hr,结构元素 ul,ol,li,dl,dt,dd,1)">列表元素 form,fieldset,legend,input,button,select,textarea,1)">表单元素 th,td,1)">表格元素 pre { padding: 0; margin: 0; } 重置默认样式font: 12px/1 微软雅黑,Tahoma,Helvetica,Arial,宋体,sans-serif;*/ color: #333; font: 12px/1 "Microsoft YaHei",SimSun,sans-serif; } h1,h6 { font-size: 100%; font-weight: normal; } em,i { font-style: a { text-decoration: none; } li { list-style-type: none; vertical-align: top; } img { border: none; display: block; textarea { overflow: auto; resize: table { border-spacing: border-collapse: collapse; } 常用公共样式 .fl { float: left; display: inline; } .fr { right; .cf:before,.cf:after { content: " "; table; } .cf:after { clear: both; } .cf { *zoom: 1; }
common.css
公共样式 .container { 站点导航 width: 1200px; 0 auto; } a.link { 链接正常颜色 #4d555d; } a.link:hover { 链接经过颜色 #f01414 !important; } .transition { -o-transition: all 0.5s; -ms-transition: -moz-transition: -webkit-transition: transition: all 0.5s; } .text-hidden{ text-indent: -9999px; 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 url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'),1)"> IE6-IE8 */ url('../test/font/iconfont.woff?t=1477124206') format('woff'),1)"> chrome,firefox url('../test/font/iconfont.ttf?t=1477124206') format('truetype'),firefox,opera,Safari,Android,iOS 4.2+ url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg'); iOS 4.1- */ } .icon { "iconfont" !important; 14px; 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: padding-bottom: .slideLeftRightCollapse { padding-left: padding-right: 0 !important; } dropdown .dropdown { position: relative; } .dropdown-toggle { relative; z-index: 2; } .dropdown-arrow { inline-block; line-height: 1; background-repeat: no-repeat; middle; } .dropdown-layer { absolute; 1; } .dropdown-left { left: right: auto; } .dropdown-right { .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: -moz-transform: -webkit-transform: transform: rotate(180deg); } .menu .dropdown .menu{ z-index: 3; } .menu .dropdown-toggle { display: block; 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 { 30px; line-height: 0 12px; color: #4d555d; nowrap; } .menu-item:hover { #f3f5f7; } .menu-active .dropdown-toggle { border-color: #cdd0d4; } .menu-active .dropdown-arrow { background-image: url(../img/dropdown-arrow-active.png);*/ } .menu-active .dropdown-layer { display: block; }*/ btn .btn { text-align: center; cursor: pointer; } search .search { 1px solid #cfd2d5; } .search-inputbox { 585px; 40px; 0 10px; background-color: .search-btn { 73px; #07111b; 14px; } .search-layer { top: -1px; 1px solid #cfd2d5; 3; } .search-layer-item { 24px; pointer; } .search-layer-item:hover { #f3f5f7; } category .category { 208px; margin-top: -62px; 14px; } .category .dropdown{ static; } .category-title { 54px; 0 20px; #c81414; #fff; } .category-title .icon { margin-right: 10px; 16px; } .category-list { 512px; #f01414; } .category .dropdown-toggle { 36px; 16px; .category .dropdown-link { .category .dropdown-arrow { 12px; simsun; bold; } .category-active .dropdown-toggle { .category-active .dropdown-toggle,.category-active .dropdown-link { .category .dropdown-layer { 744px; min-height: 473px; 8px 0 31px 0; box-shadow: 0 0 5px rgba(0,0.2); } .category-details {744px; margin-top: 20px; } .category-details-title{ 84px; border-right: 1px solid #d9dde1; right; } .category-details-title-link { .category-details-item { 592px; 15px; } .category-details-item .link { .category .dropdown-loading { 220px auto 0; } slider .slider { position: hidden; 728px; 504px; } .slider-indicator-wrap { bottom: 50%; margin-left: -36px; } .slider-indicator { 8px; #313a43; border-radius: pointer; } .slider-indicator-active { -2px; #f7f8f9; 2px solid #858b92; } .slider-control { -31px; 28px; 62px; #000; 0.8; filter: alpha(opacity=80); 22px; center; } .slider-control-left { 0; } .slider-control-right { .slider-fade .slider-item { 100%; } .slider-slide .slider-item { left: 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 { none; }
index.css
nav-site .nav-site{ 站点导航整体设置 width:100%; background-color: #f3f5f7; } .nav-site .container{ 站点导航内容块整体设置 height: 44px; line-height: border-bottom: 1px solid #cdd0d4; } .nav-site-login{ 站点导航“亲，请登陆”设置 margin-left:15px; color:#f01414; } .nav-site-signup,.nav-site-mobile{ 站点导航“注册和手机购买”设置10px; } .nav-site-category{ margin:0 10px; } .nav-site-service{ margin-right:15px; } 下拉菜单样式dropdown .dropdown{ position: relative; } .dropdown-toggle{ z-index: 2; display:block; padding: 0 16px 0 12px; border-left: border-right: 1px solid #f3f5f7; } .dropdown-arrow{ inline-block; width:8px; height:6px;background: url(../img/dropdown-arrow.png) no-repeat;8px; vertical-align: middle; } .dropdown-layer{none; top:43px;#fff; 1; border: .dropdown-left{ left:0; right:auto; } .dropdown-right{ .dropdown-item{30px;0 12px;#4d555d; white-space: nowrap; } .dropdown-item:hover{ #f3f5f7; } 下拉菜单通过js和css来实现dropdownheader .header{ 124px; .header-logo,.header .search,.header .cart { 36px; } .header-logo{136px; 48px; background: url(../img/header-logo.png) no-repeat;15px; } .header .search{ 145px; } .header .cart{ 15px; } nav-main .nav-main { margin-bottom: 182px; } .nav-main .link { 50px; 48px; } focus .focus { 504px; #eee; 8px; } .focus-sidebar { 249px; } .focus-news { 7px 20px 12px; border-bottom: .focus-news-head { 38px; 38px; } .focus-news-title { #f01414; .focus-news-body { 28px; } .focus-service { border-left: 1px solid #d9dde1; } .focus-service-item { 61px; 71px; border-top: .focus-service-icon,.focus-service-text { .focus-service-icon { 17px; #f67272; 22px; } .focus-service-text { 6px; .focus-ad { 90px; background: url(../img/focus-ad.png) no-repeat; } .focus .slider{ 8px; } todays .todays .slider{1;158px;10px; } .todays .slider-img{240px; } floor .floor { 533px; margin-bottom: 10px; } .floor-last{ 32px; } .floor .container{ position: 1; } .floor-head { 68px; border-bottom: 1px solid #f01414; } .floor-title { margin-top: 22px; } .floor-title-num { border-radius: margin-right: text-align: center; } .floor-title-text { 3px; font-size: .floor-body { 464px; } .floor-item { 200px; 232px; .floor-item:hover { box-shadow: 0 0 10px rgba(0,0.2); } .floor-item-pic { 24px; } .floor-item-name { .floor-item-name .link { #07111b; } .floor-item-price { 11px; font-weight: bold; } .floor-head .tab-item-wrap { 7px; } .floor-head .tab-item { #93999f; 14px; } .floor-head .tab-item-active { url(../img/floor-arrow.png) no-repeat center bottom; #f01414; } .floor-divider { 1px; #d9dde1; 22px 16px 0 0; } .floor-head .tab-panel { 100%; } elevator .elevator { fixed; -90px; -640px; } .elevator-item { 35px; .elevator-item:hover,.elevator-active { .elevator-text { .elevator-item:hover .elevator-num,.elevator-active .elevator-num { .elevator-item:hover .elevator-text,.elevator-active .elevator-text { block; } toolbar .toolbar { -102px; } .toolbar-item { .toolbar-icon { #b7bbbf; 30px; } .toolbar-text { 40px; } .toolbar-item:hover .toolbar-icon { #71777d; } .toolbar-item:hover .toolbar-text { #71777d; }
transition.js（兼容浏览器的transition）
(function () { var transitionEndEventName = { transition: 'transitionend',MozTransition: 'transitionend''oTransitionEnd otransitionend' }; var transitionEnd = ''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（动画效果设置）
(($) { var transition = window.mt.transition; // transition兼容解决，transition.js 提取init公共部分 init($elem,hiddenCallback) { if ($elem.is(':hidden')) { $elem.data('status','hidden'); if (typeof hiddenCallback === 'function') hiddenCallback(); } else { $elem.data('status','shown'); } } 提取show公共部分 show($elem,callback) { if ($elem.data('status') === 'show') return; if ($elem.data('status') === 'shown') ; $elem.data('status','show').trigger('show'); callback(); } hide($elem,1)">if ($elem.data('status') === 'hide') if ($elem.data('status') === 'hidden') 正常显示和隐藏 var silent = { 提取公共init后 init: init,show: ($elem) { show($elem,1)">() { $elem.show(); $elem.data('status','shown').trigger('shown'); }); },hide: ($elem) { hide($elem,1)">() { $elem.hide(); $elem.data('status','hidden').trigger('hidden'); }); } }; 带效果的显示和隐藏，css3实现方法 var css3 = { fade: { 淡入淡出 init: ($elem) { css3._init($elem,'fadeOut'); },1)">($elem) { css3._show($elem,1)">($elem) { css3._hide($elem,1)">); } },slideUpDown: { init: ($elem) { $elem.height($elem.height()); css3._init($elem,'slideUpDownCollapse'); } },slideLeftRight: { 左右滚动 init: ($elem) { $elem.width($elem.width()); css3._init($elem,'slideLeftRightCollapse' 淡入淡出上下滚动 init: 淡入淡出左右滚动 init: ); } } }; css3._init = ($elem,className) { $elem.addClass('transition'); init($elem,1)">() { $elem.addClass(className); }); }; css3._show = () { $elem.off(transition.end).one(transition.end,1)">() { $elem.data('status',1)">); }); $elem.show(); setTimeout(() { $elem.removeClass(className); },20); }); }; css3._hide = ); }); $elem.addClass(className); }); } 带效果的显示和隐藏，js实现方法 var js = { fade: { 淡入淡出 init: ($elem) { js._init($elem); },1)">($elem) { js._show($elem,'fadeIn'); },1)">($elem) { js._hide($elem,1)">); } },slideUpDown: { 上下滚动 init: 'slideUp'($elem) { js._customInit($elem,{ 'width': 0'padding-right': 0 }); },1)">($elem) { js._customshow($elem); },1)">($elem) { js._customHide($elem,{ 'width': 0 }); } },1)">($elem) { js._customInit($elem,{ 'opacity': 0'padding-top': 0'opacity': 0($elem) { js._customInit($elem,'width': 0($elem) { js._customHide($elem,1)"> }); } } }; js._init = init($elem,hiddenCallback); }; js._customInit = var styles = {}; var p options) { styles[p] = $elem.css(p); } $elem.data('styles'() { $elem.css(options); }); }; js._customshow = ($elem) { var styles = $elem.data('styles'); show($elem,1)">() { $elem.show(); $elem.stop().animate($elem.data('styles'),); }); }); }; js._customHide = () { $elem.stop().animate(options,1)">); }); }); }; js._show = () { $elem.stop()[mode](); }); }); }; js._hide = ); }); }); }; 动画效果的默认设置 var defaults = { css3: 'fade' }; showHide($elem,1)">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]; } { mode = silent; } mode.init($elem); { show: $.proxy(mode.show,1)">this (option) { return this.each( () { var $this = $(),options = $.extend({},defaults,1)">typeof option === 'object' && option),mode = $this.data('showHide'); if (!mode) { $this.data('showHide',mode = showHide($typeof mode[option] === 'function') { mode[option](); } }); } }); })(jQuery);
dropdown.js（下拉组件封装）
(($) { 'use strict' Dropdown($elem,1)">this.$elem = $elem; this.options = options; this.$layer = this.$elem.find('.dropdown-layer'this.activeClass = options.active + '-active'._init(); } Dropdown.DEFAULTS = { event: "hover"0 }; Dropdown.prototype._init= () { var self=this.$layer.showHide(.options); this.$layer.on('show shown hide hidden',1)"> (e) { self.$elem.trigger('dropdown-'+e.type); }); this.options.event === 'click') { this.$elem.on('click',1)">(e) { self.show(); e.stopPropagation(); }); $(document).on('click',$.proxy(this.hide,1)">)); } { this.$elem.hover($.proxy(this.show,1)">this),1)">)); } } Dropdown.prototype.show = () { var self = .options.delay) { this.timer = setTimeout(() { _show(); },1)">.options.delay); } { _show(); } _show() { self.$elem.addClass(self.activeClass); self.$layer.showHide('show'); } } Dropdown.prototype.hide = if(.options.delay){ clearTimeout(.timer); } this.$elem.removeClass(.activeClass); this.$layer.showHide('hide'); } $.fn.extend({ dropdown: (option) { () { this=$(this.data('dropdown'this).data(),1)">typeof option==='object'&&option); dropdown(this,options); if(!dropdown){解决多次调用dropdown问题 $this.data('dropdown',dropdown=new Dropdown($typeof dropdown[option]==='function'){ dropdown[option](); } }); } }); })(jQuery);
search.js（搜索框组件封装）
面向对象方式实现搜索功能 (($) { 'use strict'; var cache = { data: {},count: 0 (key,data) { .data[key]) { this.data[key] = data; this.count++; } },readData: (key) { .data[key]; },deleteDataByKey: delete .data[key]; this.count--; },deleteDataByOrder: (num) { var count = 0; in .data) { if (count >= num) { ; } count++; .deleteDataByKey(p); } } }; Search($elem,1)"> $elem; options; this.$form = this.$elem.find('.search-form'); this.$input = this.$elem.find('.search-inputbox'this.$elem.find('.search-layer'this.loaded = this.submit,1)">)); .options.autocomplete) { .autocomplete(); } } Search.DEFAULTS = { autocomplete: 200 }; Search.prototype.submit = this.getInputVal() === ''; } .$form.submit(); }; Search.prototype.autocomplete = var timer = .$input .on('input',1)">() { (self.options.getDataInterval) { clearTimeout(timer); timer = setTimeout(() { self.getData(); },self.options.getDataInterval); } { self.getData(); } }) .on('focus',1)">this.showLayer,1)">)) .on('click',1)">; }); .options); $(document).on('click',1)">this.hideLayer,1)">)); }; Search.prototype.getData = var inputVal = .getInputVal(); if (inputVal == '') return self.$elem.trigger('search-noData'if(cache.readData(inputVal)) return self.$elem.trigger('search-getData'this.jqXHR) .jqXHR.abort(); this.jqXHR = $.ajax({ url: this.options.url + inputVal,dataType: 'jsonp' }).done((data) { console.log(data); cache.addData(inputVal,data); console.log(cache.data); console.log(cache.count); self.$elem.trigger('search-getData'() { self.$elem.trigger('search-noData'); }).always(() { self.jqXHR = ; }); }; Search.prototype.showLayer = this.loaded) this.$layer.showHide('show'); }; Search.prototype.hideLayer = ); }; Search.prototype.getInputVal = return $.trim(.$input.val()); }; Search.prototype.setInputVal = (val) { .$input.val(removeHtmlTags(val)); removeHtmlTags(str) { return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g,''); } }; Search.prototype.appendLayer = (html) { .$layer.html(html); this.loaded = !!html; }; $.fn.extend({ search: (option,value) { () { this.data('search' option); search) { $this.data('search',search = new Search($typeof search[option] === 'function') { search[option](value); } }); } }); })(jQuery);
move.js
(; var transition = window.mt.transition; var init = this.curX = parseFloat(this.$elem.css('left'this.curY = parseFloat(this.$elem.css('top')); } var to = (x,y,callback) { x = (typeof x === 'number') ? x : .curX; y = (typeof y === 'number') ? y : .curY; this.curX === x && this.curY === y) this.$elem.trigger('move',[.$elem]); typeof callback === 'function') { callback(); } this.curX = x; this.curY = y; } var Silent = ($elem) { init.call(this,$elem); 改变this的指向，这里this指外面的this,如不使用call，this指init。 this.$elem.removeClass('transition'); }; Silent.prototype.to = ; to.call(() { self.$elem.css({ left: x,top: y }); self.$elem.trigger('moved'(x) { .to(x); }; Silent.prototype.y = (y) { this.to( css3 方式 var Css3 = this.$elem.addClass('transition'.$elem.css({ left: .curX,top: .curY }); }; Css3.prototype.to = () { self.$elem.off(transition.end).one(transition.end,1)">() { self.$elem.trigger('moved'.to(x); }; Css3.prototype.y = js方式 var Js = ); }; Js.prototype.to = () { self.$elem.stop().animate({ left: x,top: y },[self.$elem]); }); }); }; Js.prototype.x = .to(x); }; Js.prototype.y = { css3: }; var move = ($elem,1)">if (options.css3 && transition.isSupport) { css3 transition mode = new Css3($elem); } if (options.js) { js animation mode = Js($elem); } else { no animation mode = Silent($elem); } { to: $.proxy(mode.to,mode),1)">改变指针this指向mode. x: $.proxy(mode.x,y: $.proxy(mode.y,mode) }; }; $.fn.extend({ move: (option,y) { this.data('move'if (!mode) { first time $this.data('move',mode = move($) { mode[option](x,y); } }); } }); })(jQuery);
slider.js（轮播海报组件）
( ($) { 'use strict' Slider($elem,1)">this.$items = this.$elem.find('.slider-item'this.$indicators = this.$elem.find('.slider-indicator'this.$controls = this.$elem.find('.slider-control'); this.itemNum = .$items.length; this.curIndex = this._getCorrectIndex(.options.activeIndex); ._init(); } Slider.DEFAULTS = slide activeIndex: 0 }; Slider.prototype._init = this.$elem.trigger('slider-show',1)">this.curIndex,1)">this.$items[.curIndex]]); init show this.$indicators.removeClass('slider-indicator-active'this.$indicators.eq(this.curIndex).addClass('slider-indicator-active' to this.options.animation === 'slide'this.$elem.addClass('slider-slide'this.$items.eq(this.curIndex).css('left',0); send message this.$items.on('move moved',1)"> (e) { var index = self.$items.index(if (e.type === 'move') { if (index === self.curIndex) { self.$elem.trigger('slider-hide',[index,1)">]); } { self.$elem.trigger('slider-show',1)">]); } } moved if (index === self.curIndex) { 指定的 self.$elem.trigger('slider-shown',1)"> { self.$elem.trigger('slider-hidden',1)">]); } } }); move init this.$items.move(.options); this.to = ._slide; this.itemWidth = this.$items.eq(0).width(); this.transitionClass = this.$items.eq(0).hasClass('transition') ? 'transition' : ''; } fade this.$elem.addClass('slider-fade'.curIndex).show(); this.$items.on('show shown hide hidden',1)"> (e) { self.$elem.trigger('slider-' + e.type,[self.$items.index(]); }); showHide init this.$items.showHide(._fade; } bind event .$elem .hover( () { self.$controls.show(); },1)"> () { self.$controls.hide(); }) .on('click','.slider-control-left',1)"> () { self.to(self._getCorrectIndex(self.curIndex - 1),1); }) .on('click','.slider-control-right',1)"> () { self.to(self._getCorrectIndex(self.curIndex + 1),-1 () { self.to(self._getCorrectIndex(self.$indicators.index())); }); auto this.options.interval && !isNaN(Number(.options.interval))) { this.pause,1)">this.auto,1)">)); .auto(); } }; Slider.prototype._getCorrectIndex = (index) { if (isNaN(Number(index))) return 0if (index < 0) this.itemNum - 1if (index > this.itemNum - 1) index; }; Slider.prototype._activateIndicators = this.curIndex).removeClass('slider-indicator-active'this.$indicators.eq(index).addClass('slider-indicator-active'); }; Slider.prototype._fade = this.curIndex === index) this.curIndex).showHide('hide'this.$items.eq(index).showHide('show'._activateIndicators(index); this.curIndex = index; }; Slider.prototype._slide = (index,direction) { 确定滑入滑出的方向 if (!direction) { click indicators this.curIndex < index) { direction = -1; } this.curIndex > index) { direction = 1; } } 设置指定滑入幻灯片的初始位置 this.$items.eq(index).removeClass(this.transitionClass).css('left',-1 * direction * .itemWidth); 当前幻灯片滑出可视区域，指定幻灯片滑入可视区域 setTimeout( () { self.$items.eq(self.curIndex).move('x',direction * self.itemWidth); self.$items.eq(index).addClass(self.transitionClass).move('x',1)">); self.curIndex = index; },1)">); 激活indicator ._activateIndicators(index); }; Slider.prototype.auto = this.intervalId = setInterval( () { self.to(self._getCorrectIndex(self.curIndex + 1),1)">); },1)">.options.interval); }; Slider.prototype.pause = () { clearInterval(.intervalId); }; $.fn.extend({ slider: this.data('slider'this.data(),1)">if (!slider) { this.data('slider',slider = new Slider($typeof slider[option] === 'function') { slider[option](); } }); } }) })(jQuery);
tab.js（tab选项卡组件）
( Tab($elem,1)">this.$elem.find('.tab-item'this.$panels = this.$elem.find('.tab-panel'._init(); } Tab.DEFAULTS = { event: 'mouseenter',1)"> click css3: 0 }; Tab.prototype._init = this.$items.removeClass('tab-item-active'this.curIndex).addClass('tab-item-active'this.$panels.eq(.curIndex).show(); this.$elem.trigger('tab-show',1)">this.$panels[.curIndex]]); trigger event this.$panels.on('show shown hide hidden',1)">(e) { self.$elem.trigger('tab-' + e.type,[self.$panels.index(]); }); showHide init this.$panels.showHide(.options); this.options.event = this.options.event === 'click' ? 'click' : 'mouseenter'this.$elem.on(this.options.event,'.tab-item',1)">() { var elem=if (self.options.delay) { delay clearTimeout(timer); timer = setTimeout( () { self.toggle(self.$items.index(elem)); },self.options.delay); } immediate self.toggle(self.$items.index(elem)); } }); .auto(); } }; Tab.prototype._getCorrectIndex = index; }; Tab.prototype.toggle = this.$panels.eq(index).showHide('show'this.curIndex).removeClass('tab-item-active'this.$items.eq(index).addClass('tab-item-active' index; }; Tab.prototype.auto = () { self.toggle(self._getCorrectIndex(self.curIndex + 1)); },1)">.options.interval); }; Tab.prototype.pause = .intervalId); }; $.fn.extend({ tab: this.data('tab'if (!tab && typeof option !== 'object') ; if (!tab) { this.data('tab',tab = new Tab($typeof tab[option] === 'function') { tab[option](); } }); } }); })(jQuery);
index.js
(($) { 'use strict'menu var dropdown = {}; $('.menu') .on('dropdown-show',1)">(e) { dropdown.loadOnce($( }); dropdown.buildMenuItem = var html = ""if (data.length === 0) 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',1)">(e,data) { ); search.$headerSearch.html = search.$headerSearch.createHeaderSearchLayer(data,search.$headerSearch.maxNum); $this.search('appendLayer' 将生成的html呈现在页面中 (search.$headerSearch.html) { $this.search('showLayer'); } { $this.search('hideLayer'); } }).on('search-noData',1)">(e) { 没获得数据处理 $(this).search('hideLayer').search('appendLayer',1)">); }).on('click','.search-layer-item',1)"> 点击每项时，提交 search.$headerSearch.search('setInputVal',1)">).html()); search.$headerSearch.search('submit'); }); search.$headerSearch.search({ autocomplete: }); 获取数据，生成html search.$headerSearch.createHeaderSearchLayer = (data,maxNum) { var html = ''].length; if (dataNum === 0return ''var i = 0; i < dataNum; i++if (i >= maxNum) ; html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>' html; }; focus-category $('#focus-category').find('.dropdown'() { dropdown.loadOnce($( }); dropdown.createCategoryDetails = ) { 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">'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 = var dataLoad = $elem.data('load'if (!dataLoad) if (!$elem.data('loaded')) { $elem.data('loaded',1)">); $.getJSON(dataLoad).done((data) { typeof success === 'function') success($elem,data); }).fail(() { $elem.data('loaded',1)">); }); } }; imgLoader var imgLoader = {}; imgLoader.loadImg = (url,imgLoaded,imgFailed) { var image = Image(); image.onerror = typeof imgFailed === 'function') imgFailed(url); } image.onload = typeof imgLoaded === 'function') imgLoaded(url); }; image.src = url; }; imgLoader.loadImgs = ($imgs,success,fail) { $imgs.each(function(_,el) { _ 相当占位，不使用该参数。 var $img = $(el); imgLoader.loadImg($img.data('src'),1)">(url) { $img.attr('src'(url) { console.log('从' + url + '加载图片失败'); fail($img,url); }); }); } lazyLoad var lazyLoad = {}; lazyLoad.loadUntil = (options) { var items = {},loadedItemNum = 0= options.$container,id = options.id 什么时候开始加载 $elem.on(options.triggerEvent,loadItemFn = if (items[index] !== 'loaded') { $elem.trigger(id + '-loadItem',elem,1)">() { items[index] = 'loaded'; loadedItemNum++; console.log(index + ': loaded'); if (loadedItemNum === options.totalItemNum) { 全部加载完毕 $elem.trigger(id + '-itemsLoaded'); } }]); } }); 加载完毕 $elem.on(id + '-itemsLoaded',1)">(e) { console.log(id + '-itemsLoaded' 清除事件 $elem.off(options.triggerEvent,loadItemFn); }); } lazyLoad.isVisible = (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',success) { imgLoader.loadImgs($(elem).find('.slider-img'),1)">($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' }); slider.$focusSlider.slider({ css3: fade slide activeIndex: 0 }); todays-slider slider.$todaysSlider = $('#todays-slider'); slider.$todaysSlider.on('todays-loadItem','img/todays-slider/placeholder.png'); }); }); lazyLoad.loadUntil({ $container: slider.$todaysSlider,totalItemNum: slider.$todaysSlider.find('.slider-img' }); slider.$todaysSlider.slider({ css3: }); floor var floor = {}; floor.$floor = $('.floor'); floor.floorData = [{ num: '1''大牌','男装','女装'],offsetTop: floor.$floor.eq(0).offset().top,height: floor.$floor.eq(0).height(),items: [ [{ name: '匡威男棒球开衫外套2015' },{ name: 'adidas 阿迪达斯 训练 男子''必迈BMAI一体织跑步短袖T恤''NBA袜子半毛圈运动高邦棉袜''特步官方运动帽男女帽子2016''KELME足球训练防寒防风手套''战地吉普三合一冲锋衣''探路者户外男士徒步鞋''羽绒服2015秋冬新款轻薄男士''溯溪鞋涉水鞋户外鞋''旅行背包多功能双肩背包''户外旅行双肩背包OS0099' }],[{ name: '匡威男棒球开衫外套2015' }] ] },{ num: '2''热门','国际大牌','国际名品'116919879.92281193929925719936139'韩束红石榴鲜活水盈七件套装''手机通讯'2'摩托罗拉 Moto Z Play''Apple iPhone 7 (A1660)''小米 Note 全网通 白色''小米5 全网通 标准版 3GB内存''荣耀7i 海岛蓝 移动联通4G手机''乐视（Le）乐2（X620）32GB'2499899199840881128728'4'312993699299911984390'九阳电饭煲多功能智能电饭锅'32915996651799'暴风TV 超体电视 40X 40英寸''电脑数码'4'戴尔成就Vostro 3800-R6308'539930996599129995999499799419849349'戴尔成就Vostro 3800-R6308' }] ] }]; floor.buildFloor = (floorData) { ; html += '<div class="container">'; html += floor.buildFloorHead(floorData); html += floor.buildFloorBody(floorData); html += '</div>' html; }; floor.buildFloorHead = ; 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">'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>' html; }; floor.buildFloorBody = ; html += '<div class="floor-body">'var i = 0; i < floorData.items.length; i++) { html += '<ul class="tab-panel">'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>' html; }; var browser={}; browser.$win = $(window); browser.$doc = $(document); floor.timeToShow = () { console.log('time to show'); floor.$floor.each( (lazyLoad.isVisible(floor.floorData[index].offsetTop,floor.floorData[index].height)) { browser.$doc.trigger('floor-show' () { clearTimeout(floor.floorTimer); floor.floorTimer=setTimeout(floor.timeToShow,250); }); floor.$floor.on('floor-loadItem',success) { imgLoader.loadImgs($(elem).find('.floor-img'),'img/floor.placeholder.png'); }); }); browser.$doc.on('floors-loadItem',success) { var html = floor.buildFloor(floor.floorData[index]),1)"> $(elem); success(); $elem.html(html); lazyLoad.loadUntil({ $container: $elem,totalItemNum: $elem.find('.floor-img''floor' }); $elem.tab({ event: 'mouseenter',1)"> mouseenter或click css3: }); }); browser.$doc.on('floors-itemsLoaded',1)">() { browser.$win.off('scroll resize''floors' }); floor.timeToShow(); elevator floor.whichFloor = var num = -1; floor.$floor.each( (index,1)">var floorData = floor.floorData[index]; num = index; if (browser.$win.scrollTop()+browser.$win.height()/2 < floorData.offsetTop) { num = index - 1; } }); num; }; console.log(floor.whichFloor()); floor.$elevator = $('#elevator'); floor.$elevator.$items = floor.$elevator.find('.elevator-item'); floor.setElevator = var num = floor.whichFloor(); if (num === -1) { hide floor.$elevator.fadeOut(); } 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',1)"> () { clearTimeout(floor.elevatorTimer); floor.elevatorTimer = setTimeout(floor.setElevator,1)">); }); floor.$elevator.on('click','.elevator-item',1)"> () { $('html,body').animate({ scrollTop: floor.floorData[$().index()].offsetTop }); }); $('#backToTop').on('click',1)">).animate({ scrollTop: 0 }); }); })(jQuery);
json数据就不贴出了……
1.第一步 设置响应头 header('Access-Control-Allow...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...