楼层导航源码分享

来源：动视网责编：小采时间：2020-11-27 20:19:41

楼层导航源码分享

楼层导航源码分享:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>楼层导航-smallswallows</title> <script type="text/javascript" s

推荐度：

点击下载本文 文档为doc格式

导读楼层导航源码分享:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>楼层导航-smallswallows</title> <script type="text/javascript" s

<!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>

楼层导航源码分享

楼层导航源码分享:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>楼层导航-smallswallows</title> <script type="text/javascript" s

推荐度：

点击下载本文 文档为doc格式

标签：分享导航代码

热门焦点

楼层导航源码分享

楼层导航源码分享

楼层导航源码分享

最新推荐

猜你喜欢

热门推荐