JQ编写楼层效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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编写楼层效果的主要内容，如果未能解决你的问题，请参考以下文章