为什么我提交的作业老师都不指出我的js错在哪里
来源：5-6 项目作业
迷失的小麦
2020-02-26 10:39:14
<div class="floor"> <div class="container"> <img src="img/floor-loading.gif" alt=""> </div> <!--楼层2--> <div class="floor"> <div class="container"> <img src="img/floor-loading.gif" alt=""> </div> </div> <!--楼层3--> <div class="floor"> <div class="container"> <img src="img/floor-loading.gif" alt=""> </div> </div> <!--楼层4--> <div class="floor"> <div class="container"> <img src="img/floor-loading.gif" alt=""> </div> </div> <!--楼层5--> <div class="floor"> <div class="container"> <img src="img/floor-loading.gif" alt=""> </div> </div> <div class="helper"> <div class="container"> <img src="img/helper-loading.gif" alt=""> </div> </div>
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);
};
setTimeout(function(){//模拟大图片的延迟
image.src=url;
},1000);
};
imgLoader.loadImgs=function ($imgs,success,fail){
$imgs.each(function(_,el){
var $img=$(el);
//$img.attr('src',$img.data('src'));//这样写如果是容量大的图片会出问题
imgLoader.loadImg($img.data('src'),function(url){
$img.attr('src',url);
success();
},function(url){
fail($img.url);
});
});
}
var lazyLoad = {};
//主函数
lazyLoad.loadUntil=function (option){
var items={};//后面添加判断防止图片加载完之后再次加载
var loadedItemNum=0;
//var totalItemNum=$floor.length;传参进来，不需要这句话
var loadItem=null;//后面添加解绑事件，防止图片全部加载完成后每次都进行判断
var $elem=option.$container,
id=option.id;
$elem.on(option.triggerEvent,loadItem=function(event,i,elem){
console.log(1);//测试是否解绑事件
if(items[i]!=='loaded'){//如果对象中有对应的索引值且值为loaded，不再执行
$elem.trigger(id+'-loadItems',[i,elem,function(){//整体延迟加载
items[i]='loaded';//添加一个键值对进入对象items，键是i，值是loaded
loadedItemNum++;
console.log(i+'load');//测试是否添加成功当前图片，打印索引值
if(loadedItemNum===option.totalItemNum){
$elem.trigger(id+'-itemsLoaded');
}
}]);
}
});
//公共部分已提取到id+'-loadItem'参数success中
/*$elem.on(id+'-loadItem',function(event,i,elem){
var html=buildFloor(floorData[i]);
var $elem=$(elem);
items[i]='loaded';//添加一个键值对进入对象items，键是i，值是loaded
loadedItemNum++;
console.log(i+'load');//测试是否添加成功当前图片，打印索引值
if(loadedItemNum===totalItemNum){
$elem.trigger(id+'-itemsLoaded');
}
setTimeout(function(){//模拟服务器延迟
$elem.html(html);
lazyLoadFloorImgs($elem);
$elem.tab({
event:'mouseenter',
css3:false,
js:true,
animation:'fade',
activeIndex:0,
interval:0,
delay:200
});
},1000);
});*/
$elem.on(id+'-itemsLoaded',function(event){
$elem.off(option.triggerEvent,loadItem);//清除事件
//$win.off('scroll resize',timetoShow);不是公共部分
});
}
lazyLoad.isVisible=function (floorData){//判断什么时候出现在可视区域
var $win = floor.$win;
return ($win.height()+$win.scrollTop()>floorData.offsettop) && ($win.scrollTop()<floorData.offsettop+floorData.height);
}
//轮播图
var slider={};
slider.$focusSlider=$("#focus-slider");
slider.$todaysSlider=$("#todays-slider");
/*slider.lazyLoad=function($elem){
$elem.items={};//后面添加判断防止图片加载完之后再次加载
$elem.loadedItemNum=0;
$elem.totalItemNum=$elem.find('.slider-img').length;
//var loadItem;//后面添加解绑事件，防止图片全部加载完成后每次都进行判断
$elem.on("slider-show",$elem.loadItem=function(event,i,elem){
console.log(1);//测试是否解绑事件
if($elem.items[i]!=='loaded'){//如果对象中有对应的索引值且值为loaded，不再执行
$elem.trigger('slider-loadItem',[i,elem]);
}
});
$elem.on('slider-loadItem',function(event,i,elem){
//按需加载
var $imgs=$(elem).find('.slider-img');
$imgs.each(function(_,el){
var $img=$(el);
//$img.attr('src',$img.data('src'));//这样写如果是容量大的图片会出问题
imgLoader.loadImg($img.data('src'),function(url){
$img.attr('src',url);
$elem.items[i]='loaded';//添加一个键值对进入对象items，键是i，值是loaded
$elem.loadedItemNum++;
console.log(i+'load');//测试是否添加成功当前图片，打印索引值
if($elem.loadedItemNum===$elem.totalItemNum){
$elem.trigger('slider-itemsLoaded');
}
},function(url){
console.log('从'+url+'加载失败');
//多加载一次
// 显示备用图片
$img.attr('src', 'img/focus-slider/placeholder.png');
});
});
});
$elem.on('slider-itemsLoaded',function(event){
$elem.off('slider-show',$elem.loadItem);//清除事件
});
};*/
//轮播图-focus
slider.$focusSlider.on('slider-loadItems',function(event,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:'slider'
});
slider.$focusSlider.slider({
css3:false,
js:true,
animation:"slide",
activeIndex:0,
interval:0
});
//轮播图-todays
slider.$todaysSlider.on('todays-loadItems',function(event,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.lazyLoad(slider.$todaysSlider);
slider.$todaysSlider.slider({
css3:false,
js:true,
animation:"slide",
activeIndex:0,
interval:0
});
//floor
var floor={};
floor.$floor=$('.floor');
floor.$win=$(window);
floor.$doc=$(document);
floor.floorData = [{
num:'1',
zi: '',
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',
zi: '',
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',
zi: '',
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',
zi: '',
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',
zi: '',
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.timetoShow=function (){//当出现在可视区域时触发floor-show事件
console.log('timetoShow');
floor.$floor.each(function(index,elem){
if(lazyLoad.isVisible(floor.floorData[index])){
floor.$doc.trigger('floor-show',[index,elem]);
}
});
}
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 clearfixed">';
html+='<h2 class="floor-itile fl"><span class="iconfont floor-itile-num">'+floorData.zi+'</span><span class="floor-itile-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="fl text-hidden floor-divider">分割线</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 clearfixed">';
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;
}
floor.$win.on('scroll resize',floor.showFloor=function(){
clearTimeout(floor.floortimer);
floor.floortimer=setTimeout(floor.timetoShow,250);
});
floor.$floor.on('tab-loadItems',function(event,index,elem,success){
imgLoader.loadImgs($(elem).find('.floor-img'),success,function($img,url){
$img.attr('src', 'img/floor/placeholder.png');
});
});
floor.$doc.on('floors-loadItems',function(event,index,elem,success){//整体延迟加载
var html=floor.buildFloor(floor.floorData[index]);
var $elem=$(elem);
success();
setTimeout(function(){//模拟服务器延迟
$elem.html(html);
lazyLoad.loadUntil({
$container:$elem,
totalItemNum:$elem.find('.floor-img').length,
triggerEvent:'tab-show',
id:'tab'
});//选项卡对应的延迟加载
$elem.tab({
event:'mouseenter',
css3:false,
js:true,
animation:'fade',
activeIndex:0,
interval:0,
delay:200
});
},1000);
});
floor.$doc.on('floors-itemsLoaded',function(){
floor.$win.off('scroll resize',floor.showFloor);
});
lazyLoad.loadUntil({
$container:floor.$doc,
totalItemNum:floor.$floor.length,
triggerEvent:'floor-show',
id:'floors'
});
floor.timetoShow();
//helper
var helper={};
helper.$helper=$('.helper');
helper.helperData=[{
title:'消费者保障',
items:['保障范围','退货退款流程','服务中心','更多特色服务']
},{
title:'新手上路',
items:['新手专区','消费警示','交易安全','24小时在线帮助','免费开店']
},{
title:'付款方式',
items:['快捷方式','信用卡','余额包','蜜蜂花啊','货到付款']
},{
title:'慕商特色',
items:['手机慕多多','慕多多信','大众评审','B格指南']
}];
helper.isVisible=function (){//判断什么时候出现在可视区域
var $win = floor.$win;
return ($win.height()+$win.scrollTop()>helper.$helper.offset().top) && ($win.scrollTop()<helper.$helper.offset().top+helper.$helper.height());
}
helper.buildHelper=function (helperData){
var html="";
html+='<div class="container clearfixed">';
for(var i=0;i<helperData.length;i++){
html+=helper.buildFloorBody(helperData);
}
html+='</div>';
return html;
}
helper.buildHelperBody=function (helperData){
var html="";
html+='<div class="helper-item fl">';
html+='<p class="helper-title">'+helperData.title+'</p>';
html+='<div class="helper-text clearfixed">';
for(var i=0;i<helperData.items.length;i++){
html+='<a href="javascript:;" class="fl"><p class="helper-text-item">'+helperData.items[i]+'</p></a>';
}
html+='</div>';
html+='</div>';
}
helper.timetoShow=function(){
helper.$helper.each(function(index,elem){
if(helper.isVisible()){
floor.$doc.trigger('helper-show',[index,elem]);
}
});
};
floor.$win.on('scroll resize',helper.showHelper=function(){
clearTimeout(helper.floortimer);
helper.floortimer=setTimeout(helper.timetoShow,250);
});
helper.$helper.on('helper-loadItems',function(event,index,elem,success){
var html=helper.buildHelper(helper.helperData);
var $elem=$(elem);
success();
setTimeout(function(){//模拟服务器延迟
$elem.html(html);
},1000);
});
floor.$doc.on('helper-itemsLoaded',function(){
floor.$win.off('scroll resize',helper.showHelper);
});
lazyLoad.loadUntil({
$container:floor.$doc,
totalItemNum:helper.$helper.length,
triggerEvent:'helper-show',
id:'helper'
});
helper.timetoShow();/*floor*/
.floor{margin-bottom: 10px;height: 532px;}
.floor .container{position: relative;z-index: 1;}
/*floor-head*/
.floor-head{height: 68px;border-bottom: 1px solid #f01414;}
.floor-itile{margin-top: 22px;}
.floor-itile-num{display: inline-block;font-size: 32px;line-height: 1em;margin-right: 12px;}
.floor-itile-text{color: #07111b;font-size: 20px;font-weight: normal;position: relative;top: -6px;}
/*floor-body*/
.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.4);}
.floor-item-pic{margin-top: 24px;}
.floor-img{width: 114px;height: 114px;background-size: cover;}
.floor-item-name{margin-top: 24px;}
.floor-item-name .link{color: #07111b;font-size: 12px;}
.floor-item-price{margin-right: 11px;color: #f01414;font-size: 14px;font-weight: 700;}
.tab-panel{display: none;height: 100%;}
/*floor-tab*/
.floor-head .tab-item-wrap{height: 62px;line-height: 62px;margin-top: 7px;}
.floor-head .tab-item{display: inline-block;color: #93999f;font-size: 14px;margin-right: 16px;}
.floor-head .floor-divider{width: 1px;height: 14px;background-color: #d9dde1;margin: 25px 16px 0 0;}
/*tab选项交互*/
.tab-item-active{color: #f01414!important;
background-image: url("../img/floor-arrow.png");background-repeat: no-repeat;background-position: center bottom;}
/*helper*/
.helper{margin-top: 20px;border-top: 1px solid #d9dde1;height: 138px;}
.helper-item{padding: 28px 37px 29px 23px;}
.helper-title{line-height: 29px;color: #07111b;font-size: 14px;}
.helper-text{width: 240px;}
.helper-text-item{line-height: 24px;margin-right: 23px;color: #a4a9ae;font-size: 11px;cursor: pointer;}
.helper-text-item:hover{color: #f01414;}问题：1floor中的tab切换图片时上下窜位
2helper没有加载出来
写回答
2回答
-
好帮手慕慕子
2020-02-26
同学你好，对于你之前反馈的问题，已经转告给视频中讲课的老师了，老师正在解决中，还望同学谅解，耐心等待下，有解决方案时，我们一定会及时通知同学！
祝学习愉快~
0 -
迷失的小麦
提问者
2020-02-26
额，这两个问题已经解决了
但是之前反馈给老师的2个问题（上课遗留的）希望老师在有答案后从这个问题反馈给我，谢谢！
1.轮播图第二种方式发送消息和边界切换
https://class.imooc.com/course/qadetail/193450
2.楼层选项卡自动切换打开后错乱（使用showHide）
https://class.imooc.com/course/qadetail/193531
0
相似问题