jQuery实现商品楼层和电梯功能
程序员文章站
2022-04-15 13:58:50
效果图 floor.html floor
效果图
floor.html
<!doctype html>
<html lang="zh-cn"><!-- 设置简体中文 -->
<head>
<meta charset="utf-8">
<title>floor</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/floor.css">
</head>
<body>
<!-- 1f -->
<div class="floor">
<div class="container">
<img src="../img/floor-loading.gif">
</div>
</div>
<!-- 2f一 -->
<div class="floor">
<div class="container">
<img src="../img/floor-loading.gif">
</div>
</div>
<!-- 3f -->
<div class="floor" >
<div class="container">
<img src="../img/floor-loading.gif">
</div>
</div>
<!-- 4f -->
<div class="floor">
<div class="container">
<img src="../img/floor-loading.gif">
</div>
</div>
<!-- 5f -->
<div class="floor">
<div class="container">
<img src="../img/floor-loading.gif">
</div>
</div>
<!-- elevator -->
<div class="elevator container" id="elevator">
<a href="javascript:;" class="elevator-item">
<span class="elevator-num">f1</span>
<span class="elevator-text">服饰</span>
</a>
<a href="javascript:;" class="elevator-item">
<span class="elevator-num">f2</span>
<span class="elevator-text">美妆</span>
</a>
<a href="javascript:;" class="elevator-item">
<span class="elevator-num">f3</span>
<span class="elevator-text">手机</span>
</a>
<a href="javascript:;" class="elevator-item">
<span class="elevator-num">f4</span>
<span class="elevator-text">家电</span>
</a>
<a href="javascript:;" class="elevator-item">
<span class="elevator-num">f5</span>
<span class="elevator-text">数码</span>
</a>
</div>
<script src="../js/jquery.js"></script>
<script src="../js/transition.js"></script>
<script src="../js/showhide.js"></script>
<script src="../js/tab2.js"></script>
<script src="../js/floor.js"></script>
</body>
</html>
base.css
floor.css
/*基本样式 */
.container{
width:1200px;
margin:0 auto;
}
.transition{
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
.text-hidden{
text-indent:-9999px;
overflow:hidden;
}
.fl{
float:left;
}
/*floor楼层区域*/
.floor{
margin-top:7px;
height:534px;
}
.floor .container{
position: relative;
z-index:1;
}
.tab-head{
height:68px;
border-bottom:1px solid #f01414;
}
.tab-head-title{
margin-top:22px;
}
.tab-head-title-num{
display: inline-block;
width:24px;
height:24px;
border-radius:50%;
background-color:#07111b;
color:#fff;
text-align: center;
line-height:24px;
margin-right:10px;
}
.tab-head-title-name{
font-size:20px;
color:#07111b;
position: relative;
top:3px;
}
.tab-head-item-wrap{
margin-top:8px;
height:62px;
line-height:62px;
}
.tab-head-item{
display: inline-block;
font-size:14px;
color:#93999f;
margin-right:16px;
}
.tab-head-item-active{
color:#f01414;
background:url(../img/floor-arrow.png) center bottom no-repeat;
}
.tab-head-item-divider{
display: inline-block;
width:1px;
height:14px;
background-color:#d9dde1;
margin-top:21px;
margin-right:16px;
}
.tab-body{
height:466px;
}
.tab-body-panel{
height:466px;
display: none;
}
.tab-body-panel-item{
width:200px;
height:233px;
text-align: center;
}
.tab-body-panel-item:hover{
box-shadow:0 0 10px rgba(0,0,0,.2);
}
.tab-body-panel-item-pic{
margin-top:24px;
}
.tab-body-panel-item-name{
margin-top:23px;
font-size:12px;
color:#07111b;
}
.tab-body-panel-item-price{
margin-top:9px;
font-size:14px;
color:#f01414;
}
/*elevator*/
.elevator{
position: fixed;
left:50%;
top:50%;
margin-top:-90px;
margin-left:-640px;
/*container宽度1200px,50%是-600px，再移动-40px左右的距离*/
}
.elevator-item{
width:24px;
height:35px;
display: block;
line-height: 35px;
text-align: center;
color:#4d555d;
border-top:1px solid #d9dde1;
}
.elevator-item:hover,
.elevator-item-active{
color:#f01414;
}
.elevator-num{
}
.elevator-text{
display: none;
}
.elevator-item:hover .elevator-num,
.elevator-item-active .elevator-num{
display: none;
}
.elevator-item:hover .elevator-text,
.elevator-item-active .elevator-text{
display: block;
}
transition.js
showhide.js
tab2.js
floor.js
// 不要暴露在全局，使用匿名函数自执行
(function($){
"use strict";
//floor
var $floor=$(".floor");
//楼层数据
var floordata=[
{
num:"1",
text:"服装箱包",
tabs:["大牌","男装","女装"],
offsettop:$floor.eq(0).offset().top,
height:$floor.eq(0).height(),
items:[
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
],
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
],
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
]
]
},
{
num:"2",
text:"个护美妆",
tabs:["热门","国际大牌","国际名品"],
offsettop:$floor.eq(1).offset().top,
height:$floor.eq(1).height(),
items:[
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
],
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
],
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
]
]
},
{
num:"3",
text:"手机通讯",
tabs:["热门","品质优选","新机尝鲜"],
offsettop:$floor.eq(2).offset().top,
height:$floor.eq(2).height(),
items:[
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
],
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
],
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
]
]
},
{
num:"4",
text:"家用电器",
tabs:["热门","大家电","生活电器"],
offsettop:$floor.eq(3).offset().top,
height:$floor.eq(3).height(),
items:[
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
],
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
],
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
]
]
},
{
num:"5",
text:"电脑数码",
tabs:["热门","电脑/平板","潮流影音"],
offsettop:$floor.eq(4).offset().top,
height:$floor.eq(4).height(),
items:[
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
],
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
],
[
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
},
{
name:"匡威男棒球开衫外套2020",
price:"￥479"
}
]
]
}
];
//提前加载图片
function loadimg(url,success,fail){
var image=new image();
image.onload=function(){
if(typeof success==="function") success();
}
image.onerror=function(){
if(typeof fail==="function") fail();
}
image.src=url;
}
//按需加载图片
function loadimgs($imgs,success,fail){
$imgs.each(function(_,el){
var $img=$(el);
loadimg($img.data("src"),function(url){
var url=$img.data('src');
$img.attr("src",url);
success();
},function(url){
fail($img,url);
})
});
}
//延迟加载
function loadutil(options){
var items={},
loadeditemsnum=0,
loadfn=null,
$elem=options.$container,
id=options.id,
totalitemnum=options.totalitemnum,
triggerevent=options.triggerevent;
//接收开始显示图片的消息
$elem.on(triggerevent,loadfn=function(e,i,elem){
if(items[i] !== "loaded"){
//触发开始加载图片的自定义事件
$elem.trigger(id+"-loaditems",[i,elem,function(){
items[i]="loaded";
loadeditemsnum++;
if(loadeditemsnum===totalitemnum){
//触发全部加载完毕的自定义事件
$elem.trigger(id+"-itemsloaded");
}
}]);
}
});
//绑定全部加载完毕的自定义事件
$elem.on(id+"-itemsloaded",function(e){
//清除事件
$elem.off(triggerevent,loadfn);
});
}
//创建floor结构
function buildfloor(floordata){
var html="";
html+=`<div class="container">`;
html+=buildfloorhead(floordata);
html+=buildfloorbody(floordata);
html+=`</div>`;
return html;
}
//创建floor头部
function buildfloorhead(floordata){
var html="";
html+=`<div class="tab-head">
<div class="tab-head-title fl">
<span class="tab-head-title-num">`+floordata.num+`f</span><span class="tab-head-title-name">`+floordata.text+`</span>
</div>
<ul class="tab-head-item-wrap fr">`;
for(var i=0;i<floordata.tabs.length;i++){
html+=`<li class="fl"><a href="javascript:;" class="tab-head-item">`+floordata.tabs[i]+`</a></li>`;
if(i!==floordata.tabs.length-1){
html+=`<li class="fl tab-head-item-divider text-hidden">分割线</li>`;
}
}
html+=`</ul>
</div>`;
return html;
}
//创建floor体
function buildfloorbody(floordata){
var html="";
html+=`<div class="tab-body">`;
for(var i=0;i<floordata.tabs.length;i++){
html+=`<ul class="tab-body-panel">`;
for(var j=0;j<floordata.items[i].length;j++){
html+=`<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" class="floor-img" data-src="../img/floor/`+floordata.num+`/`+(i+1)+`/`+(j+1)+`.png"></a></p>
<p class="tab-body-panel-item-name">`+floordata.items[i][j].name+`</p>
<p class="tab-body-panel-item-price">`+floordata.items[i][j].price+`</p>
</li>`;
}
html+=`</ul>`;
}
html+=`</div>`;
return html;
}
//是否在可视区内
function isvisible(floordata){
//性能优化：将固定的值如楼层距离网页顶端的距离和楼层的高度存入floordata，不在此每次执行
// 视口的高度+视口滚过的距离 大于 元素距离网页顶部的距离（否则元素顶部在视口下面）
// 并且
// 视口滚过的距离 小于 元素滚过的距离+元素高度（否则元素底部在视口上面）
return ($(window).height()+$(window).scrolltop()>floordata.offsettop) && ($(window).scrolltop()<floordata.offsettop+floordata.height);
}
//展示楼层
function showfloor(){
$(".floor").each(function(index,elem){//each的第一个参数默认是索引
//注意第二个参数不是jquery对象，转对象需要包装
if(isvisible(floordata[index])){
//floor的父元素触发事件
$(document).trigger("floor-show",[index,elem]);
}
});
}
$(window).on("scroll resize",$floor.showfloor=function(){
cleartimeout($floor.timer);
//开定时器稀释事件流，优化性能
$floor.timer=settimeout(showfloor,250);
});
//tab监听事件
$floor.on("floor-loaditems",function(e,i,elem,success){
loadimgs($(elem).find(".floor-img"),success,function($img,url){
$img.attr("src","../img/floor.placeholder.png");
});
});
//楼层监听事件
$(document).on("floors-loaditems",function(e,i,elem,success){
var html=buildfloor(floordata[i]),
$elem=$(elem);
success();
//模拟线上延迟
settimeout(function(){
$elem.html(html);
//延迟加载tab
loadutil({
$container:$elem,
totalitemnum:$elem.find(".floor-img").length,
triggerevent:"tab-show",
id:"floor",
});
//激活tab选项卡
$elem.tab({
event:"mouseenter",//click
css3:false,
js:false,
animation:"fade",
activeidx:0,
interval:0,
delay:0
});
},1000);
});
//楼层加载结束监听事件
$(document).on("floors-itemsloaded",function(){
$(window).off("scroll resize",$floor.showfloor);
});
//延迟加载楼层
loadutil({
$container:$(document),
totalitemnum:$floor.length,
triggerevent:"floor-show",//tab-show
id:"floors",//floor
});
showfloor();
//elevator
function whichfloor(){
var num;
$floor.each(function(index,elem){
num=index;
//$(window).height()/2表示在楼层的1/2位置即可出现
if($(window).scrolltop()+$(window).height()/2<floordata[index].offsettop){
num=index-1;
return false;
}
});
return num;
}
var elevator=$("#elevator"),
eleitems=elevator.find(".elevator-item");
//setelevator
function setelevator(){
var num=whichfloor();
if(num<0){
elevator.fadeout();
}else{
elevator.fadein();
eleitems.removeclass("elevator-item-active");
eleitems.eq(num).addclass("elevator-item-active");
}
}
setelevator();
var eletimer=null;
$(window).on("scroll resize",function(){
cleartimeout(eletimer);
eletimer=settimeout(setelevator,250);
});
//事件代理抵达指定楼层
elevator.on("click",".elevator-item",function(){
$("html,body").animate({
// $(this).index()获取当前点击的项的索引
scrolltop:floordata[$(this).index()].offsettop
})
})
})(jquery);
下一篇： 如何渲染几万条数据并不卡住界面？