老师这里的电梯找不到对应的楼层这部分出错，请找一下原因，谢谢
$(".menu").on("dropdown-show",function(e){
loadOnce($(this),buildMenuItem)
})
$(".menu").dropdown({
event:'hover',
css3:true,
js:true,
animation:'fade',
delay:200
})
function buildMenuItem($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 $headersearch=$("#header_search")
var html=""
var maxNum=10
//接受数据
$headersearch.on("search-getData",function(e,data){
html=creatHeaderSearchLayer(data,maxNum)
$(this).find(".search-layer").html(html)
if(html){
$(this).search("showLayer")
}else{
$(this).search("hideLayer")
}
}).on("search-noData",function(){
$(this).search("hideLayer")
$(this).find(".search-layer").text("")
}).on("click",".search-layer-item",function(){
$input.val($(this).text())
//当点击表单search-layer-item时提交表单
search(submit())
})
$("#header_search").search({
autocomPlete:true,
css3:false,
js: false,
animation: 'fade'
})
//创建HTML结构
function creatHeaderSearchLayer(data,maxNum){
var html=""
var 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;
}
//category
//接受数据
$("#category").find(".dropdown").on("dropdown-show",function(){
loadOnce($(this),createCategoryDetails)
})
$("#category").find(".dropdown").dropdown({
css3:true,
js:true,
animation:"fadeslideUpDown"
})
function createCategoryDetails($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>'
}
$elem.find('.dropdown-layer').html(html)
}
//focus-slider
var $focusSlider=$("#focus-slider")
//接受消息
// $focusSlider.on("slider-show slider-shown slider-hide slider-hidden",function(e,i,elem){
// })
$focusSlider.items={}
$focusSlider.loadedItemNum=0 //已加载0张图片
$focusSlider.totalItemNum=$focusSlider.find(".slider-img").length//获取到的总共的图片
$focusSlider.on("slider-show",loadItem=function(e,index,elem){
if($focusSlider.items[index]!=="loaded"){
$focusSlider.trigger("slider-loadItem",[index,elem]) //如果没有加载，则触发slider-loadItem进行加载
}
})
$focusSlider.on("slider-loadItem",function(e,index,elem){
var img=$(elem).find(".slider-img")
loadimg(img.data("src"),function(url){
img.attr("src",url)
$focusSlider.items[index]="loaded"
$focusSlider.loadedItemNum++
// console.log(index + ': loaded')
if($focusSlider.loadedItemNum===$focusSlider.totalItemNum){
//全部加载完毕
$focusSlider.trigger("slider-itemsLoaded")
}
},function(url){
console.log("从"+url+"加载失败")
img.attr("src","../img/focus-slider/placeholder.png")
})
})
$focusSlider.on("slider-itemsLoaded",function(e){
// console.log("slider-itemsLoaded")
//清除事件
$focusSlider.off("silder-show",loadItem)
})
function loadimg(url,imgLoaded,failLoading){
var image=new Image();
image.onerror=function(){
if(typeof failLoading==="function") failLoading(url)
}
image.onload=function(){
if(typeof imgLoaded==="function") imgLoaded(url)
}
// setTimeout(function(){image.src=url},2000)
image.src=url
}
$focusSlider.slider({
css3:true,
js:false,
animation:"fade",
activeIndex:2, //初始化时显示的第几张
interval:0 //当设置时间为0时没有自动切换则就为自动切换
})
// today
var $todaySlider=$("#today-slider")
//接受消息
// $focusSlider.on("slider-show slider-shown slider-hide slider-hidden",function(e,i,elem){
// })
$todaySlider.items={}
$todaySlider.loadedItemNum=0 //已加载0张图片
$todaySlider.totalItemNum=$todaySlider.find(".slider-img").length//获取到的总共的图片
$todaySlider.on("slider-show",loadItem=function(e,index,elem){
if($todaySlider.items[index]!=="loaded"){
$todaySlider.trigger("slider-loadItem",[index,elem]) //如果没有加载，则触发slider-loadItem进行加载
}
})
$todaySlider.on("slider-loadItem",function(e,index,elem){
var imgs=$(elem).find(".slider-img")//一个item里多张图片
imgs.each(function(i,el){ //对每一张图片进行遍历
var img=$(el)
loadimg(img.data("src"),function(url){
img.attr("src",url)
$todaySlider.items[index]="loaded"
$todaySlider.loadedItemNum++
//console.log(index + ': loaded')
if($todaySlider.loadedItemNum===$todaySlider.totalItemNum){
//全部加载完毕
$todaySlider.trigger("slider-itemsLoaded")
}
},function(url){
console.log("从"+url+"加载失败")
img.attr("src","img/focus-slider/placeholder.png")
})
})
})
// loadimg(img.data("src"),function(url){
// img.attr("src",url)
// items[index]="loaded"
// loadedItemNum++
// if(loadedItemNum===totalItemNum){
// //全部加载完毕
// $focusSlider.trigger("slider-itemsLoaded")
// }
// },function(url){
// console.log("从"+url+"加载失败")
// img.attr("src","../img/focus-slider/placeholder.png")
// })
// })
$todaySlider.on("slider-itemsLoaded",function(e){
//console.log("slider-itemsLoaded")
//清除事件
$todaySlider.off("silder-show",loadItem)
})
function loadimg(url,imgLoaded,failLoading){
var image=new Image();
image.onerror=function(){
if(typeof failLoading==="function") failLoading(url)
}
image.onload=function(){
if(typeof imgLoaded==="function") imgLoaded(url)
}
//setTimeout(function(){image.src=url},2000)
image.src=url
}
$todaySlider.slider({
css3:true,
js:false,
animation:"slide",
activeIndex:2, //初始化时显示的第几张
interval:2000 //当设置时间为0时没有自动切换则就为自动切换
})
// floor
var $floor=$(".floor")
//里面图片的加载
function lazyLoadFloorImgs($elem) { //为了方便多个楼层的加载循环
var items={}
var loadedItemNum=0 //已加载0张图片
var totalItemNum=$elem.find(".floor-img").length//获取到的总共的图片
var loadItemFn = null;
//接收消息(这是事件处理函数，第一个传的一定是事件对象e,后面才是类型，索引，对象)
// $floor.on("tab-show tab-shown tab-hide tab-hidden",function(e,index,elem){
// // console.log(type)
// // console.log(index)
// // console.log(elem)
// })
$elem.on("tab-show",loadItemFn=function(e,index,elem){
if(items[index]!=="loaded"){
$elem.trigger("tab-loadItem",[index,elem]) //如果没有加载，则触发slider-loadItem进行加载
}
})
$elem.on("tab-loadItem",function(e,index,elem){
var imgs=$elem.find(".floor-img")//一个item里多张图片
imgs.each(function(i,el){ //对每一张图片进行遍历
var img=$(el)
loadimg(img.data("src"),function(url){
img.attr("src",url)
items[index]="loaded"
loadedItemNum++
console.log(index + ': loaded')
if(loadedItemNum===totalItemNum){
//全部加载完毕
$elem.trigger("tab-itemsLoaded")
console.log("tab-itemsLoaded")
}
},function(url){
console.log("从"+url+"加载失败")
img.attr("src","img/floor/placeholder.png")
})
})
})
$elem.on("tab-itemsLoaded",function(e){
//console.log("slider-itemsLoaded")
//清除事件
$elem.off("tab-show",loadItemFn)
})
}
$floor.each(function(_, elem) {
lazyLoadFloorImgs($(elem));
});
function loadimg(url,imgLoaded,failLoading){
var image=new Image();
image.onerror=function(){
if(typeof failLoading==="function") failLoading(url)
}
image.onload=function(){
if(typeof imgLoaded==="function") imgLoaded(url)
}
//setTimeout(function(){image.src=url},2000)
image.src=url
}
var floorData = [{
num: '1',
text: '服装鞋包',
tabs: ['大牌', '男装', '女装'],
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: ['热门', '国际大牌', '国际名品'],
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: ['热门', '品质优选', '新机尝鲜'],
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: ['热门', '大家电', '生活电器'],
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: ['热门', '电脑/平板', '潮流影音'],
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
}]
]
}];
//楼层的加载
function lazyLoadFloor() { //为了方便多个楼层的加载循环
var items={}
var loadedItemNum=0 //已加载0张图片
var totalItemNum=$floor.length//获取到的总共的图片
var loadItemFn = null;
//接收消息(这是事件处理函数，第一个传的一定是事件对象e,后面才是类型，索引，对象)
// $floor.on("tab-show tab-shown tab-hide tab-hidden",function(e,index,elem){
// // console.log(type)
// // console.log(index)
// // console.log(elem)
// })
$doc.on("floor-show",loadItemFn=function(e,index,elem){
if(items[index]!=="loaded"){
$doc.trigger("floor-loadItem",[index,elem]) //如果没有加载，则触发slider-loadItem进行加载
}
})
$doc.on("floor-loadItem",function(e,index,elem){
var html=buildFloor(floorData[index])
$elem=$(elem)
items[index]="loaded"
loadedItemNum++
console.log(index + ': loaded')
if(loadedItemNum===totalItemNum){
//全部加载完毕
$doc.trigger("floor-itemsLoaded")
console.log("tab-itemsLoaded")
}
$elem.html(html)
lazyLoadFloorImgs($elem)
$elem.tab({
css3:false,
js:false,
animation:"fade",
activeIndex:0,
event:"mouseenter",
interval:0,
delay:0
})
})
$doc.on("floor-itemsLoaded",function(e){
//console.log("slider-itemsLoaded")
//清除事件
$doc.off("floor-show",loadItemFn)
$win.off("scroll resize",timeToShow)
})
}
function buildFloor(floorData) {
var html = '';
html += '<div class="container">';
html += buildFloorHead(floorData);
html += buildFloorBody(floorData);
html += '</div>';
return html;
};
function buildFloorHead(floorData) {
var html = '';
html += '<div class="floor-head">';
html += '<h2 class="floor-title fl"><span class="floor-title-num">' + floorData.num + '</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;
};
function buildFloorBody(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 $win=$(window)
var $doc=$(document)
function isVisible($elem){//可视区
return ($win.height()+$win.scrollTop()>$elem.offset().top) && ($win.scrollTop()<$elem.offset().top+$elem.height())
//可视区的高度加上滚动条滚动的高度>元素的上边沿距离页面顶部的距离.滚动条的高度<元素的下边沿距离页面顶部的距离加上元素自身的高度，两者都在可视区范围内
}
function timeToShow(){
$floor.each(function(index,elem){
//遍历楼层看那些是在可视区范围内
if(isVisible($(elem))){
// console.log("第"+ (index+1)+"楼层显示")
$doc.trigger("floor-show",[index,elem])
}
})
}
$win.on("scroll resize",timeToShow)
lazyLoadFloor()
timeToShow()
//elevator
function whichFloor(){
var num=-1;
$floor.each(function(index,elem){
num=index;
var floorData=floorData[index]
if($win.scrollTop() + $win.height() / 2 < floorData.$elem.offset().top){
num=index-1
return false
}
})
return num
}
var $elevator = $('#elevator')
var $items =$elevator.find('.elevator-item')
function setElevator(){
var num = whichFloor();
if (num === -1) { // hide
$elevator.fadeOut();
} else { // show
$elevator.fadeIn();
$items.removeClass('elevator-active');
$items.eq(num).addClass('elevator-active');
}
}
setElevator()
//公用的只执行一次
function loadOnce($elem,success){
//按需加载
dataLoad=$elem.data("load")
if(!dataLoad) return
if(!$elem.data("loaded")){
$elem.data('loaded',true)
//在获取文件之前做的事情
// $layer.html('<li class="dropdown-loading"></li>')
//获取文件
$.getJSON(dataLoad).done(function(data){//加载成功做的事情
if(typeof success==='function'){success($elem,data)}
}).fail(function(){//加载失败做的事情
$elem.data('loaded',false)//加载失败状态变量为false，表示还没有被加载，还可以进行下一次的加载
})
}
}
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星