作业：楼层信息没显示

首页课程实战体系课手记专栏慕课教程

作业：楼层信息没显示

来源：3-4 楼层HTML结构的按需加载--全部加载完毕后的收尾工作

慕粉1905369247

2020-05-03 18:41:56

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li class="fl"><a href="javascript:;" class="nav-site-mobile link">手机逛慕淘</a></li>

</ul>

<a href="javascript:;" class="nav-site-dropdown-toggle dropdown-toggle link">我的慕多多

</a>

<li><a href="javascript:;" class="nav-site-dropdown-item link-bg">慕多多muduoduo</a></li>

</ul>

</li>

<a href="javascript:;" class="nav-site-dropdown-toggle dropdown-toggle link">收藏夹

</a>

<li><a href="javascript:;" class="nav-site-dropdown-item link-bg">慕多多muduoduo</a></li>

</ul>

</li>

<a href="javascript:;" class="nav-site-dropdown-toggle dropdown-toggle link">商品分类

</a>

<!-- <ul class="nav-site-dropdown-layer dropdown-layer">

<li><a href="javascript:;" class="nav-site-dropdown-item link-bg">慕多多muduoduo</a></li>

</ul> -->

</li>

<a href="javascript:;" class="nav-site-dropdown-toggle dropdown-toggle link">卖家中心

</a>

<li><a href="javascript:;" class="nav-site-dropdown-item link-bg">慕多多muduoduo</a></li>

</ul>

</li>

<a href="javascript:;" class="nav-site-dropdown-toggle dropdown-toggle link">联系客服

</a>

<li><a href="javascript:;" class="nav-site-dropdown-item link-bg">慕多多muduoduo</a></li>

</ul>

</li>

</ul>

</div>

</form>

</ul>

</div>

</div>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</div>

</dl>

</div>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</ol>

</div>

</div>

<strong class="mr">[公告]</strong>慕多多启用新客服电话

</a>

</p>

<strong class="mr">[活动]</strong>优选好货

</a>

</p>

<strong class="mr">[公告]</strong>中差评功能升级

</a>

</p>

<strong class="mr">[公告]</strong>陌生人拼团上线

</a>

</p>

<strong class="mr">[公告]</strong>售假获刑又起诉

</a>

</p>

</div>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</div>

<!-- <div class="floor-head">

</ul>

</div>

<a href="javascript:;" class="floor-body-panel-item-text">剑南春水晶剑 52度整箱装白酒500ml*6瓶口感浓香型</a>

</li>

<a href="javascript:;" class="floor-body-panel-item-text">剑南春水晶剑 52度整箱装白酒500ml*6瓶口感浓香型</a>

</li>

</ul>

<a href="javascript:;" class="floor-body-panel-item-text">剑南春水晶剑 52度整箱装白酒500ml*6瓶口感浓香型</a>

</li>

</ul>

<a href="javascript:;" class="floor-body-panel-item-text">剑南春水晶剑 52度整箱装白酒500ml*6瓶口感浓香型</a>

</li>

</ul>

</div> -->

</div>

</div>

</body>

</html>

/*nav-site*/

.nav-site{

width: 100%;

height: 44px;

line-height: 44px;

background-color: #f3f5f7;

border-bottom: 1px solid #cdd0d4;

}

.nav-site-login,

.nav-site-signup,

.nav-site-mobile{

margin:0 10px;

}

.nav-site-dropdown-toggle{

display: block;

padding: 0 10px;

border-left: 1px solid #f3f5f7;

border-right: 1px solid #f3f5f7;

}

.nav-site-dropdown-arrow{

padding: 0 4px;

display: inline-block;

}

.nav-site-dropdown-layer{

position: absolute;

background-color: #fff;

border: 1px solid #cdd0d4;

border-top: none;

overflow: hidden;

}

.nav-site-dropdown-item{

display: block;

padding: 0 10px;

white-space: nowrap;

}

.header{

width: 100%;

height: 124px;

background-color: #fff;

}

.header-logo{

background: url(../img/header-logo.png) no-repeat center center;

background-size: contain;

width: 160px;

height: 100px;

margin-top:10px;

margin-right: 150px;

}

.header-search{

position: relative;

border: 1px solid #cdd0d4;

margin-top: 36px;

}

.header-search-form{

}

.header-search-input{

width: 605px;

height: 38px;

line-height: 40px;

background-color: #fff;

border: none;

outline: none;

font-size: 18px;

padding: 0 10px;

cursor: pointer;

}

.header-search-submit{

width: 73px;

height: 40px;

line-height: 40px;

font-size: 18px;

color: #fff;

background-color: #ca003f;

border: 1px solid #ca003f;

cursor: pointer;

}

.header-search-layer{

position: absolute;

top: 100%;

width: 100%;

left: -1px;

border: 1px solid #cdd0d4;

border-top: none;

}

.header-search-layer-item{

font-size: 16px;

height: 24px;

line-height: 24px;

padding: 4px 10px;

cursor: pointer;

}

.nav-main{

width: 100%;

height: 48px;

line-height: 48px;

text-indent: 208px;

background-color: #ca003f;

}

.nav-main-item{

margin: 40px;

color: #fff;

font-size: 16px;

}

.focus{

}

.focus-right{

position: relative;

background-color: #ca003f;

}

.focus-right-title,

.focus-right-link,

.focus-right-dropdown-arrow{

color: #fff;

padding-left: 20px;

}

.focus-right-title{

display: block;

height: 60px;

line-height: 60px;

font-size: 16px;

background-color: #c1043f;

}

.focus-right-title .icon{

margin-right: 10px;

font-size: 18px;

}

.focus-right-list{

}

.focus-right-dropdown{

position: static;

}

.focus-right-dropdown-toggle{

line-height: 34px;

}

.focus-right-dropdown-arrow{

position: absolute;

right: 20px;

font-family: '宋体';

}

.focus-right-dropdown-layer{

position: absolute;

left: 100%;

top: 60px;

width: 710px;

min-height: 477px;

background-color: #fff;

padding: 14px;

box-shadow: 0 0 5px rgba(0,0,0,.5);

}

.focus-right-dropdown-column{

width: 700px;

margin: 10px;

}

.focus-right-dropdown-column-title{

font-weight: bold;

border-right: 1px solid #cdd0d4;

min-width: 69px;

}

.focus-right-dropdown-column-title,

.focus-right-dropdown-column-item .link{

margin-left: 10px;

margin-right: 10px;

padding-right: 4px;

line-height: 24px;

}

.focus-right-dropdown-column-item{

width: 580px;

}

.focus-middle{

overflow: hidden;

}

.focus-middle-slider{

position: relative;

}

.focus-middle-slider-wrap{

/*display: none;*/

position: relative;

}

.focus-middle-slider-item{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.focus-middle-slider-indicator-wrap{

position: absolute;

bottom: -460px;

left: 50%;

margin-left: -40px;

}

.focus-middle-slider-indicator-item{

width: 12px;

height: 12px;

border-radius: 50%;

border: 1px solid rgba(0,0,0,0);

background-color: rgba(0,0,0,.2);

margin: 0 4px;

}

.focus-middle-slider-control{

position: absolute;

display: block;

width: 38px;

height: 70px;

line-height: 70px;

text-align: center;

font-size: 24px;

color: #fff;

font-family: '宋体';

top: 200px;

background-color: rgba(0,0,0,.2);

}

.slider-control-left{

left: 0;

}

.slider-control-right{

right: 0;

}

.focus-left{

}

.focus-left-news{

background-color: #fff;

border: 1px solid #cdd0d4;

border-bottom: none;

padding: 10px;

}

.focus-left-news-head{

height: 38px;

line-height: 38px;

}

.focus-left-news-title{

font-size: 16px;

}

.focus-left-news-more{

}

.focus-left-news-body{

}

.focus-left-news-item{

height: 28px;

line-height: 28px;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

.focus-left-service{

border-left: 1px solid #cdd0d4;

}

.focus-left-service-item{

width: 60px;

height: 70px;

text-align: center;

background-color: #fff;

border-top: 1px solid #cdd0d4;

border-right: 1px solid #cdd0d4;

}

.focus-left-service-item-icon,

.focus-left-service-item-text{

display: inline-block;

width: 100%;

}

.focus-left-service-item-icon{

padding-top: 17px;

font-size: 20px;

padding-bottom: 4px;

color: #f67272;

}

.focus-left-service-item-text{

padding-bottom: 15px;

font-size: 14px;

color: #4d555d;

}

.focus-left-ad{

background: url(../img/focus-ad.png) no-repeat center;

height: 90px;

}

.floor{

height: 570px;

background-color: rgba(202, 202, 202, 0.1);

margin-bottom: 10px;

}

.floor-head{

height: 58px;

margin-top: 18px;

border-bottom: 1px solid #f01414;

}

.floor-head-title{

margin-top: 16px;

}

.floor-head-title-num{

background-color: #07111b;

width: 24px;

height: 24px;

line-height: 22px;

display: inline-block;

color: #fff;

border-radius: 50%;

vertical-align: bottom;

text-align: center;

}

.floor-head-title-text{

color: #07111b;

font-size: 26px;

margin-left: 12px;

}

.floor-head-list{

}

.floor-head-item{

color: #4d555d;

display: block;

font-size: 14px;

padding:0 16px;

line-height: 59px;

}

.floor-body{

}

.floor-body-panel{

display: none;

}

.floor-body-panel-item{

height: 245px;

width: 200px;

text-overflow: ellipsis;

text-align: center;

margin-top: 10px;

}

.floor-body-panel-item-img{

width: 120px;

/*height: 110px;*/

overflow: hidden;

background-size: cover;

}

.floor-body-panel-item-text{

display: block;

margin-bottom: 14px;

color: #000;

line-height: 16px;

text-align: left;

margin-left: 20px;

}

.floor-body-panel-item-price{

font-weight: bold;

}

.floor-body-panel-item-img,

.floor-body-panel-item-text,

.floor-body-panel-item-price{

margin-top: 24px;

}

.nav-site-active .nav-site-dropdown-toggle{

background-color: #fff;

border-left: 1px solid #cdd0d4;

border-right: 1px solid #cdd0d4;

}

.header-search-layer-item:hover{

background-color: #f3f5f7;

}

.transition{

-webkit-transition: all .5s;

-moz-transition: all .5s;

-ms-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

.fade{

visibility: hidden;

opacity: 0;

}

.slideUpDown{

height: 0 !important;

padding-top: 0 !important;

padding-bottom: 0 !important;

}

.slideLeftRight{

width: 0 !important;

padding-left: 0 !important;

padding-right: 0 !important;

}

.white{

margin-top: 200px;

height: 20px;

background-color: #fff;

}

.wrap{

width: 1200px;

margin: 0 auto;

}

.mr{

margin-right: 10px;

}

.link{

color: #4d555d;

}

.link:hover{

color: #f01414;

}

.link-active{

color: #f01414;

}

.link-bg{

color: #4d555d;

}

.link-bg:hover{

background-color: #f3f5f7;

}

.dropdown{

position: relative;

}

.dropdown-layer{

display: none;

overflow: hidden;

}

.nav-site-dropdown-layer{

display: none;

}

.focus-right-dropdown-toggle:hover{

background-color: #fff;

color: #ca003f;

}

.focus-right-dropdown-toggle:hover .focus-right-link,

.focus-right-dropdown-toggle:hover .focus-right-dropdown-arrow{

color: #ca003f;

}

.focus-middle-slider-indicator-item:hover{

background-color: rgba(0,0,0,.5);

border: 1px solid #0f0;

}

.focus-middle-slider-indicator-item-active{

background-color: rgba(0,0,0,.5) !important;

border: 2px solid #0f0 !important;

}

.floor-head-item-active{

color: #f01414 !important;

background: url(../img/floor-arrow.png) no-repeat center bottom;

}

.slider-fade .focus-middle-slider-item{

display: none;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.floor-body-panel-item:hover{

box-shadow: 0 0 5px rgba(0,0,0,.5);

}

.focus{

}

.focus-right{

width: 208px;

height: 565px;

background-color: #aaa;

margin-top: -60px;

}

.focus-right-list{

}

.focus-middle{

width: 728px;

height: 497px;

background-color: #bbb;

margin: 8px 8px;

}

.focus-left{

width: 245px;

height: 497px;

background-color: #ccc;

margin-top: 8px;

overflow: hidden;

}

.nav-site-dropdown-layer{

z-index: 3;

}

.focus-right-dropdown-layer{

z-index: 3;

}

@font-face {

font-family: "iconfont";

src: url('../font/iconfont.eot?t=1477124206');

/* IE9*/

src: url('../font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('../font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */

url('../font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url('../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;

}

/*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;

}

(function($){

function Dropdown(elem,options){

this.$elem=$(elem)

this.options=options

this.$layer=this.$elem.find(".dropdown-layer")

this.activeClass=this.options.active+'-active'

this.init()

}

var defaults={

css3:false,

js:false,

animation:'fade',

event:'hover',

delay:0,

active:''

}

Dropdown.prototype.init=function(){

var self=this

//init showHide

this.$layer.showHide(this.options)

this.$layer.on('show shown hide hidden',function(e){

// console.log(self.options)

self.$elem.trigger(self.options.active+'-'+e.type)

})

if(this.options.event==='click'){

this.$elem.on("click",function(){

self.show()

return false

})

$(document).on('click',function(){

self.hide()

})

}else{

this.$elem.hover(function(){

self.show()

},function(){

self.hide()

})

}

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(){

this.$elem.removeClass(this.activeClass)

this.$layer.showHide('hide')

}

$.fn.extend({

dropdown:function(option){

return this.each(function(){

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

var mode=$(this).data("dropdownData")

if(!mode){

$(this).data('dropdownData',mode=new Dropdown(this,options))

}

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

mode[option]()

}

})

}

})

})(jQuery)

(function($){

function Floor(elem,options){

this.$elem=$(elem)

this.options=options

this.$items=this.$elem.find('.floor-head-item')

this.$panels=this.$elem.find('.floor-body-panel')

console.log(this.$panels)

this.itemsLen=this.$items.lenght

this.curIndex=this._getCorrentIndex(this.options.activeIndex)

this.init()

}

Floor.defaults={

css3:false,

js:false,

animation:'silent',

event:'mouseenter',

activeIndex:0,

interval:4000,

delay:0

}

Floor.prototype.init=function(){

var self=this

this.$elem.showHide(this.options)

this.$items.removeClass('floor-head-item-active')

this.$items.eq(this.curIndex).addClass('floor-head-item-active')

this.$panels.eq(this.curIndex).show()

this.$elem.trigger('floor-show',[this.curIndex,this.$panels[this.curIndex]])

this.$panels.on('show shown hide hidden',function(e){

self.$elem.trigger('floor-'+e.type,[self.$panels.index(this),this])

})

this.options.event=this.options.event==='click'?'click':'mouseenter'

this.$elem.on(this.options.event,'.floor-head-item',function(){

var elem=this

clearTimeout(self.timer)

self.timer=setTimeout(function(){

self.fade(self.$items.index(elem))

},self.options.delay)

})

}

Floor.prototype.fade=function(index){

if(this.curIndex===index) return

this.$items.eq(this.curIndex).removeClass('floor-head-item-active')

this.$items.eq(index).addClass('floor-head-item-active')

this.$panels.eq(this.curIndex).showHide('hide')

this.$panels.eq(index).showHide('show')

this.curIndex=index

}

Floor.prototype._getCorrentIndex=function(index){

if(isNaN(Number(index))) return

if(index<0) return this.itemsLen-1

if(index>this.itemsLen-1) return 0

return index

}

$.fn.extend({

floor:function(option){

return this.each(function(){

var options=$.extend({},Floor.defaults,typeof option==='object'&&option)

var mode=$(this).data('floorData')

if(!mode){

$(this).data("floorData",mode=new Floor(this,options))

}

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

mode[option]()

}

})

}

})

})(jQuery)

console.log(window.overall.transition)

var navSiteDropdown=$('.nav-site-dropdown')

navSiteDropdown.on('nav-site-show',function(e){

console.log(e.type)

})

navSiteDropdown.dropdown({

css3:false,

js:false,

animation:'silent',

event:'hover',

delay:0,

active:'nav-site'

})

navSiteDropdown.on('focus-right-show',function(e){

console.log(e.type)

loadOnce($(this),buildfocusRightItem)

})

var focusRightDropdown=$('.focus-right-dropdown')

focusRightDropdown.dropdown({

css3:false,

js:false,

animation:'silent',

event:'hover',

delay:0,

active:'focus-right'

})

var focusMiddleSlider=$('.focus-middle-slider')

focusMiddleSlider.slider()

var floor=$('.floor')

floor.on('floor-show',function(e,panelsIndex,panelHtml){

console.log(e.type+':'+panelsIndex)

})

floor.floor()

floor.each(function(_,el){

buildFloorImgs($(el))

})

var $doc=$(document)

function isVisible($elem){

var $win=$(window)

return $win.height()+$win.scrollTop()>$elem.offset().top&&$win.scrollTop()<$elem.offset().top+$elem.height()

}

function startShowFloor(){

floor.each(function(index,elem){

if(isVisible($(elem))){

$doc.trigger('start-floor-show',[index,elem])

console.log('楼层：'+(index+1)+" 出现")

}

})

}

function loadedFloorItem(){

var items={}

var loadedItemNum=0

var totalItemNum=floor.length

var loadedItemFn=null

$doc.on('start-floor-show',function(e,panelsIndex,panelHtml){

if(items[panelsIndex]!=='loaded'){

var elem=$(panelHtml)

var html=buildItem(floorData[index])

console.log('hi')

items[panelsIndex]='loaded'

loadedItemNum++

if(loadedItemNum===totalItemNum){

console.log('loaded-floor-item-all')

$doc.trigger('loaded-floor-item-all')

// $doc.off('floor-show',loadedItemFn)

}

setTimeout(function(){

elem.html(html)

},1000)

}

})

}

startShowFloor()

loadedFloorItem()

function loadOnce($elem,buildItem){

var dataLoad=$elem.data('load')

console.log(dataLoad)

$.getJSON(dataLoad).done(function(data){

if(typeof buildItem==='function') buildItem($elem,data)

console.log('loadOnce-success-json数据')

}).fail(function(){

console.log('loadOnce error!!!-本地数据')

buildfocusRightItem($(this),focusRightData)

})

}

function buildfocusRightItem($elem,data){

var html=''

for(var i=0;i<data.length;i++){

html+='<dl class="focus-right-dropdown-column cf">'

html+='<dt class="focus-right-dropdown-column-title fl">'+data[i].title+'</dt>'

html+='<dd class="focus-right-dropdown-column-item fl">'

for(var j=0;j<data[i].items.length;j++){

html+='<a href="javascript:;" class="link">'+data[i].items[j]+'</a>'

}

html+='</dd></dl>'

}

$('.focus-right-dropdown').find('.dropdown-layer').html(html)

}

function buildFloorImgs($elem){

var items={}

var loadedImgsNum=0

var totalImgsNum=$elem.find('.floor-body-panel-item-img').length

var loadedImgsFn=null

$elem.on('floor-show',loadedImgsFn=function(e,panelsIndex,panelHtml){

if(items[panelsIndex]!=='loaded'){

$elem.trigger('loaded-floor-img',[panelsIndex,panelHtml])

console.log(e.type)

}

})

$elem.on('loaded-floor-img',function(e,panelsIndex,panelHtml){

var $imgs=$(panelHtml).find('.floor-body-panel-item-img')

$imgs.each(function(_,el){

var $img=$(el)

loadImg($img.data('src'),function(url){

$img.attr('src',url)

items[panelsIndex]='loaded'

loadedImgsNum++

if(loadedImgsNum===totalImgsNum){

$elem.trigger('floor-loaded-img-all')

}

},function(url){

console.log('加载图片失败：'+url)

})

$elem.on('floor-loaded-img-all',function(e){

console.log(e.type+'：全部加载完毕-清除')

$elem.off('floor-show',loadedImgsFn)

})

}

function loadImg(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)

}

setTimeout(function(){

image.src=url

},1000)

}

function buildFloorWrap(floorData){

var html=''

html+='<div class="wrap">'

html+=buildFloorHead(floorData)

html+=buildFloorBody(floorData)

html+='</div>'

return html

}

function buildFloorHead(floorData){

var html=''

html+='<div class="floor-head">'

html+='<h2 class="floor-head-title fl"><span class="floor-head-title-num">'+floorData.num+'</span><span class="floor-head-title-text">米面粮油</span></h2>'

html+='<ul class="floor-head-list fr">'

html+='<li class="fl"><a href="javascript:;" class="floor-head-item">'+floorData.tabs[0]+'</a></li>'

html+='<li class="fl"><a href="javascript:;" class="floor-head-item">'+floorData.tabs[1]+'</a></li>'

html+='<li class="fl"><a href="javascript:;" class="floor-head-item">'+floorData.tabs[2]+'</a></li>'

html+='</ul>'

html+='</div>'

return html

}

function buildFloorBody(floorData){

var html=''

for (var i= 0;i<floorData.items.length;i++) {

html+='<div class="floor-body">'

html+='<ul class="floor-body-panel">'

for(var j=0;j<floorData.items[i].length;j++){

html+='<li class="floor-body-panel-item fl">'

html+='<a href="javascript:;"><img src="img/floor/'+floorData.num+'/'+(i+1)+'/'+(j+1)+'.jpg" class="floor-body-panel-item-img"></a>'

html+='<a href="javascript:;" class="floor-body-panel-item-text">'+floorData.items[i][j].name+'</a>'

html+='<p class="floor-body-panel-item-price link-active">'+floorData.items[i][j].price+'</p>'

html+='</li>'

}

html+='</ul>'

html+='</div>'

}

return html

}

var floorData=[

{

num:1,//楼层

text:'服装鞋包',

tabs:['综合','干果','米面粮油'],

items:[

[

{

name:'剑南春水晶剑 52度整箱装白酒500ml*6瓶口感浓香型',

price:'￥479'

}

[

{

name:'金纺织衣物护理剂怡神薰衣草2.5L+2.5L(柔顺剂)(与洗衣液搭配使用)',

price:'￥335'

}

[

{

name:'百草味坚果零食每日坚果奶油味夏威夷果200g/袋(内含开果器)',

price:'￥159'

}

[

{

name:'优选100 有机速冻鲜食黄糯玉米 6支 240g/支年货礼盒',

price:'￥159'

}

]

}

]

var focusRightData=[

{

"title": "电视",

"items": [

"抢亿元红包",

"合资品牌",

"国产品牌",

"互联网品牌"

]

{

"title": "空调",

"items": [

"壁挂式空调",

"柜式空调",

"中央空调",

"空调配件"

]

{

"title": "洗衣机",

"items": [

"满千减百",

"滚筒洗衣机",

"洗烘一体机",

"波轮洗衣机",

"迷你洗衣机",

"洗衣机配件"

]

{

"title": "冰箱",

"items": [

"多门",

"对开门",

"三门",

"双门",

"冷柜/冰吧",

"酒柜",

"冰箱配件"

]

{

"title": "厨卫大电",

"items": [

"油烟机",

"燃气灶",

"烟灶套装",

"消毒柜",

"洗碗机",

"电热水器",

"燃气热水器",

"嵌入式厨电"

]

{

"title": "厨房小电",

"items": [

"小家电年货",

"电饭煲",

"微波炉",

"电烤箱",

"电磁炉",

"电压力锅",

"豆浆机",

"咖啡机",

"面包机",

"榨汁机",

"料理机",

"电饼铛",

"养生壶/煎药壶",

"酸奶机",

"煮蛋器",

"电水壶/热水瓶",

"电炖锅",

"多用途锅",

"电烧烤炉",

"电热饭盒",

"其它厨房电器"

]

{

"title": "生活电器",

"items": [

"取暖电器",

"吸尘器",

"净化器",

"扫地机器人",

"加湿器",

"挂烫机/熨斗",

"电风扇",

"冷风扇",

"插座",

"电话机",

"饮水机",

"净水器",

"除湿机",

"干衣机",

"清洁机",

"收录/音机",

"其它生活电器",

"生活电器配件"

]

{

"title": "个护健康",

"items": [

"剃须刀",

"口腔护理",

"电吹风",

"美容器",

"卷/直发器",

"理发器",

"剃/脱毛器",

"足浴盆",

"健康秤/厨房秤",

"按摩器",

"按摩椅",

"计步器/脂肪检测仪",

"其它健康电器"

]

{

"title": "家庭影音",

"items": [

"家庭影院",

"迷你音响",

"DVD",

"电视影音配件"

]

{

"title": "进口电器",

"items": [

"进口电器"

]

}

]

(function($){

var search=$('.header-search')

var input=search.find('.header-search-input')

var submit=search.find('.header-search-submit')

var layer=search.find('.header-search-layer')

var form=search.find('.header-search-form')

input.on('input',function(){

var url='https://suggest.taobao.com/sug?code=utf-8&_ksTS=1587265829751_716&callback=jsonp717&k=1&area=c2c&bucketid=13&q='+encodeURIComponent($.trim(input.val()))

$.ajax({

url:url,

dataType:'jsonp'

}).done(function(data){

console.log(data)

var html=''

var maxNum=10

var dataLength=data['result'].length

if(dataLength===0){

layer.hide().html('')

return

}

for(var i=0;i<dataLength;i++){

html+='<li class="header-search-layer-item">'+data['result'][i][0]+'</li>'

}

layer.html(html).show()

}).fail(function(){

console.log('error')

})

submit.on('click',function(){

if($.trim(input.val())===''){

return false

}

})

form.on('submit',function(){

if($.trim(input.val())===''){

return false

}

})

input.on('click',function(){

layer.show()

return false;

})

$(document).on('click',function(){

layer.hide();

})

layer.on('click','.header-search-layer-item',function(){

input.val($(this).text())

form.submit()

})

})(jQuery)

(function($){

var transition=window.overall.transition

function init($elem,callback){

if($elem.is(':hidden')){

$elem.data('status','hidden')

if(typeof callback==='function') callback()

}else{

$elem.data('status','shown')

}

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:function($elem){

init($elem)

show:function($elem){

if($elem.data('status')==='show') return

if($elem.data('status')==='shown') return

$elem.data('status','show').trigger('show')

$elem.show()

$elem.data('status','shown').trigger('shown')

hide:function($elem){

if($elem.data('status')==='hide') return

if($elem.data('status')==='hidden') return

$elem.data('status','hide').trigger('hide')

$elem.hide()

$elem.data('status','hidden').trigger('hidden')

}

var css3={

fade:{

init:function($elem){

$elem.addClass('transition')

init($elem,function(){

$elem.addClass('fade')

})

show:function($elem){

show($elem,function(){

$elem.off(transition.end).one(transition.end,function(){

$elem.data('status','shown').trigger('shown')

})

$elem.show()

setTimeout(function(){

$elem.removeClass('fade')

},10)

})

hide:function($elem){

hide($elem,function(){

$elem.off(transition.end).one(transition.end,function(){

$elem.data('status','hidden').trigger('hidden')

$elem.hide()

})

$elem.addClass('fade')

})

}

slideUpDown:{

init:function($elem){

$elem.height($elem.height())

$elem.addClass('transition')

init($elem,function(){

$elem.addClass('slideUpDown')

})

show:function($elem){

show($elem,function(){

$elem.off(transition.end).one(transition.end,function(){

$elem.data('status','shown').trigger('shown')

})

$elem.show()

setTimeout(function(){

$elem.removeClass('slideUpDown')

},10)

})

hide:function($elem){

hide($elem,function(){

$elem.off(transition.end).one(transition.end,function(){

$elem.data('status','hidden').trigger('hidden')

$elem.hide()

})

$elem.addClass('slideUpDown')

})

}

slideLeftRight:{

init:function($elem){

$elem.width($elem.width())

$elem.addClass('transition')

init($elem,function(){

$elem.addClass('slideLeftRight')

})

show:function($elem){

show($elem,function(){

$elem.off(transition.end).one(transition.end,function(){

$elem.data('status','shown').trigger('shown')

})

$elem.show()

setTimeout(function(){

$elem.removeClass('slideLeftRight')

},10)

})

hide:function($elem){

hide($elem,function(){

$elem.off(transition.end).one(transition.end,function(){

$elem.data('status','hidden').trigger('hidden')

$elem.hide()

})

$elem.addClass('slideLeftRight')

})

}

var js={

fade:{

init:function($elem){

$elem.removeClass('transition')

init($elem)

show:function($elem){

show($elem,function(){

$elem.stop().fadeIn(function(){

$elem.data('status','shown').trigger('shown')

})

hide:function($elem){

hide($elem,function(){

$elem.stop().fadeOut(function(){

$elem.data('status','hidden').trigger('hidden')

})

}

slideUpDown:{

init:function($elem){

$elem.removeClass('transition')

init($elem)

show:function($elem){

show($elem,function(){

$elem.stop().slideDown(function(){

$elem.data('status','shown').trigger('shown')

})

hide:function($elem){

hide($elem,function(){

$elem.stop().slideUp(function(){

$elem.data('status','hidden').trigger('hidden')

})

}

slideLeftRight:{

init:function($elem){

$elem.removeClass('transition')

var styles={}

styles['width']=$elem.css('width')

styles['padding-left']=$elem.css('padding-left')

styles['padding-right']=$elem.css('padding-right')

$elem.data('styles',styles)

init($elem,function(){

$elem.css({

'width':0,

'padding-left':0,

'padding-right':0

})

show:function($elem){

var styles=$elem.data('styles')

show($elem,function(){

$elem.show()

$elem.stop().animate({

'width':styles['width'],

'padding-left':styles['padding-left'],

'padding-right':styles['padding-right']

},function(){

$elem.data('status','shown').trigger('shown')

})

hide:function($elem){

var styles=$elem.data('styles')

hide($elem,function(){

$elem.hide()

$elem.stop().animate({

'width':0,

'padding-left':0,

'padding-right':0

},function(){

$elem.data('status','hidden').trigger('hidden')

$elem.hide()

})

}

var defaults={

css3:false,

js:false,

animation:'fade'

}

function showHide($elem,options){

var ani={}

if(options.css3&&transition.isSupport){

ani=css3[options.animation]

}else if(options.js){

ani=js[options.animation]

}else{

ani=silent

}

ani.init($elem)

return{

show:$.proxy(ani.show,this,$elem),

hide:$.proxy(ani.hide,this,$elem)

}

$.fn.extend({

showHide:function(option){

return this.each(function(){

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

var mode=$(this).data('showHideData')

if(!mode){

$(this).data('showHideData',mode=showHide($(this),options))

}

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

mode[option]()

}

})

}

})

})(jQuery)

(function($){

function Slider(elem,options){

this.$elem=$(elem)

this.options=options

this.$sliderItems=this.$elem.find('.focus-middle-slider-item')

this.$sliderIndicators=this.$elem.find('.focus-middle-slider-indicator-item')

this.$sliderControls=this.$elem.find('.focus-middle-slider-control')

this.sliderItemLen=this.$sliderItems.length

this.curIndex=this._getCorrentIndex(this.options.activeIndex)

this.init()

}

Slider.defaults={

css3:true,

js:true,

animation:'fade',

activeIndex:0,

interval:500

}

Slider.prototype._getCorrentIndex=function(index){

if(isNaN(Number(index))) return

if(index<0) return this.sliderItemLen-1

if(index>this.sliderItemLen-1) return 0

return index

}

Slider.prototype.init=function(){

var self=this

//init showHide

this.$elem.showHide(this.options)

//移除幻灯片所有的indicator样式

this.$sliderIndicators.removeClass('focus-middle-slider-indicator-item-active')

//找到当前的添加样式

this.$sliderIndicators.eq(this.curIndex).addClass('focus-middle-slider-indicator-item-active')

if(this.options.animation==='fade'){

//先把所有的都隐藏起来

this.$elem.addClass('slider-fade')

//找到当前的显示

this.$sliderItems.eq(this.curIndex).show()

this.to=this.fade

}

//事件代理

this.$elem

.hover(function(){

self.$sliderControls.showHide('show')

},function(){

self.$sliderControls.showHide('hide')

})

.on('click','.slider-control-left',function(){

self.to(self._getCorrentIndex(self.curIndex-1))

})

.on('click','.slider-control-right',function(){

self.to(self._getCorrentIndex(self.curIndex+1))

})

}

Slider.prototype.fade=function(index){

//找到当前的

this.$sliderItems.eq(this.curIndex).showHide('hide')

//找到指定的

this.$sliderItems.eq(index).showHide('show')

//找到当前的

this.$sliderIndicators.removeClass('focus-middle-slider-indicator-item-active')

//找到指定的

this.$sliderIndicators.eq(this.curIndex).addClass('focus-middle-slider-indicator-item-active')

//更新当前的索引值

this.curIndex=index

}

$.fn.extend({

slider:function(option){

return this.each(function(){

var options=$.extend({},Slider.defaults,typeof option==='object'&&option)

var mode=$(this).data('sliderData')

if(!mode){

$(this).data('sliderData',mode=new Slider(this,options))

}

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

mode[option]()

}

})

}

})

})(jQuery)

(function(){

var transitionEndEventName={

transition:'transitionend',

MozTransition:'transitionend',

WebkitTransition:'webkitTransitionEnd',

OTransition :'oTransitionEnd'

}

var transitionEnd=''

var isSupport=false

for(var name in transitionEndEventName){

if(document.body.style[name]!==undefined){

transitionEnd=transitionEndEventName[name]

isSupport=true

}

window.overall=window.overall||{}

window.overall.transition={

end:transitionEnd,

isSupport:isSupport

}

})()

写回答

2回答

好帮手慕星星

2020-05-06

同学你好，因是作业问题，建议在对应小节处上传作业

将自己遇到问题列出来，我们批复作业的老师会进行详细的批复并给出建议。

祝学习愉快！

慕粉1905369247

提问者

2020-05-04

自己改的能显示了，但是还是有问题，他把整个综合干果米面粮油的内容都显示出来了，然后左侧的综合、干果、米面娘姨也不能来回之间切换panel里的内容

0 学习 · 14456 问题

查看课程

相似问题

作业：楼层滚动没有显示，楼层右侧顶部的item不能跳转

回答 1

作业问题楼层选项卡切换

回答 5

楼层HTML结构内容加载不出来

回答 1

为什么工具条没有显示呀。。

回答 2

这里的计算是怎么算的，假期没人了吗

回答 1

打开慕课网App查看更多内容