楼层导航源码分享
程序员文章站
2022-06-05 18:24:27
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>楼层导航-smallswallows</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js?1.1.11"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.div div{
width: 300px;
height: 800px;
border: 1px solid red;
}
ul li{
list-style-type: none;
}
.floor{
position: fixed;
top: 20px;
right: 20px;
border: 1px solid red;
display: none;
}
.loading{
background: skyblue;
}
.red{
background: red;
}
li,.top{
cursor: pointer;
}
li:hover{
background: skyblue;
}
</style>
</head>
<body>
<div style="height: 50px;background: red">楼层展示</div>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div>
<ul>
<li>第1张</li>
<li>第2张</li>
<li>第3张</li>
<li>第4张</li>
<li>第5张</li>
<li>第6张</li>
<li>第7张</li>
<li>第8张</li>
</ul>
<p>返回顶部</p>
</div>
</body>
<script>
window.onload = window.onscroll = function(){
var top = 50; //控制离顶部的距离
var length = $(".div div").length;
var liLength=$("li").length;
//添加加载动画 each
$(".div div").each(function(){
$(this).addClass("loading");
})
console.log($(".div div")[0].offsetTop)
if($(window).scrollTop() >$(".div div")[0].offsetTop-top ){
$(".floor").css("display","block")
}else{
$(".floor").css("display","none")
}
// 楼层添加颜色，通过:eq()方法来实现
var num = 0;
for(var i = 0;i<length;i++){
if($(window).scrollTop() >=$(".div div")[i].offsetTop- top){
num = i;
}
$(".floor li:eq("+i+")").css("background","")
}
$(".floor li:eq("+num+")").css("background","red")
// 楼层点击事件 点击楼层跳转
for(var i = 0;i<liLength;i++){
$(".floor li:eq("+i+")").click(function(){
for(var j=0;j<liLength;j++){
if($(this).html() == $(".floor li:eq("+j+")").html()){
$('body,html').stop().animate({
scrollTop: ($(".div div")[j].offsetTop)
}, 500);
return false;
}
}
})
}
}
$(".top").click(function() {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
</script>
</html>
以上就是楼层导航源码分享的详细内容，更多请关注其它相关文章！
上一篇： php pdo支持连接池吗
下一篇： php广告图片循环播放 幻灯片效果