JQ編寫樓層效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
header,footer{background:skyblue;height:300px;}
div:nth-child(2){background:yellowgreen;height:500px;}
div:nth-child(3){background:cyan;height:500px;}
div:nth-child(4){background:darkcyan;height:500px;}
div:nth-child(5){background:salmon;height:500px;}
div:nth-child(6){background:wheat;height:500px;}
.tip{
position:fixed;
right:5px;
bottom:5px;
display:none;
}
.tip li{
list-style:none;
width:50px;
height:49px;
border-top:1px solid gray;
text-align:center;
line-height:49px;
background:olivedrab;
color:white;
cursor:pointer;
}
.selected{background:gold !important;}
</style>
</head>
<body>
<header>頂層</header>
<div class="lc">第一層：服裝</div>
<div class="lc">第二層：電器</div>
<div class="lc">第三層：化妝品</div>
<div class="lc">第四層：珠寶</div>
<div class="lc">第五層：書籍</div>
<footer>底部</footer>
<div class="tip">
<ul><li>Top</li></ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul><li>Top</li></ul>
</div>
</body>
</html>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script>
//綁定樓層與按鈕的關系
function Floor(lc,tip){
this.lc = lc;
this.tip = tip;
this.tipUlli = tip.find("ul>li");
this.tipOlli = tip.find("Ol>li");
}
//頁面初始化
Floor.prototype.init = function(){
var that = this;
//每個樓層距離頂部的間距
this.arr = this.lc.map(function(ind,elem){
return $(elem).offset().top;
});
var len = this.arr.length;
this.arr.push(this.lc.eq(len-1).height()+this.arr[len-1]);
//給tip中的li綁定事件
//返回頂部
this.tipUlli.click(function(){
$("html,body").animate({"scrollTop":0})
});
//點擊Ol中的li
this.tipOlli.click(function(){
$("html,body").animate({"scrollTop":that.arr[ind]});
});
//當滾動條滾動時發生的變化
$(window).scroll(function(){
var st = $(window).srollTop();
var h = $(window).height/2;
//顯示
if(st > h){
that.tip.fadeIn();
}else{
that.tip.fadeOut();
}
//判斷可視區域顯示哪一個樓層
var i=0,a =that.arr,len=a.length-1,ind=-1;
for( ; i<l;i++){
var min = a[i];
var max = a[i+1];
if(min < st+h && st+h < max){
ind=i;
}
}
that.tipOlli.removeClass("selected");
if(ind>-1){
that.tipOlli.eq(ind).addClass("selected");
}
});
}
var f = new Floor($(".lc"),$(".tip"));
</script>
JQ編寫樓層效果