Maison > Article > interface Web > Partage du code source de la navigation au sol
Partage du code source de la navigation au sol
- 巴扎黑original
- 2017-06-26 14:31:461014parcourir
<!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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn