87,910
社区成员
发帖
与我相关
我的任务
分享jQuery楼层定位效果求大神帮我看看怎么简化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页导航定位</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
li{width: 1200px;margin: auto;min-height: 600px;margin-bottom: 10px;margin-top: 10px;color: white;text-align: center;line-height: 600px;font-size: 26px;font-family: "微软雅黑";list-style: none;}
p{display: block;position: fixed;right: 10px;top:200px;}
a{display: block;background-color: #4169E1;color: white;margin:5px 0;width: 60px;height: 30px;text-decoration: none;text-align: center;line-height: 30px;}
a:hover{background-color: aqua;color: #000000;}
.louc{background-color: aqua;color: #000000;}
</style>
<body>
<ul id="ul">
<li style="background-color: #0C4E7C;" id="f1">第一屏</li>
<li style="background-color: #dd5353;" id="f2">第二屏</li>
<li style="background-color: #7FFFD4;" id="f3">第三屏</li>
</ul>
<p id="p">
<a class="louc">一楼</a>
<a >二楼</a>
<a >三楼</a>
</p>
<script type="text/javascript">
$('#p a').click(function(){
var ind = $('#p a').index(this)+1;
var topVal = $('#f'+ind).offset().top;
$('body,html').stop().animate({scrollTop:topVal},1000)
})
$(window).scroll(scrolls)
function scrolls(){
var f1,f2,f3,f4,f5,f6,f7;
var fixRight = $('#p a');
var sTop = $(window).scrollTop();
fl = $('#f1').offset().top;
f2 = $('#f2').offset().top;
f3 = $('#f3').offset().top;
if(sTop>=fl){
fixRight.eq(0).addClass('louc').siblings().removeClass('louc');
}
if(sTop>=f2-100){
fixRight.eq(1).addClass('louc').siblings().removeClass('louc');
}
if(sTop>=f3-100){
fixRight.eq(2).addClass('louc').siblings().removeClass('louc');
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>网页导航定位</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
li{width: 1200px;margin: auto;min-height: 600px;margin-bottom: 10px;margin-top: 10px;color: white;text-align: center;line-height: 600px;font-size: 26px;font-family: "微软雅黑";list-style: none;}
p{display: block;position: fixed;right: 10px;top:200px;}
a{display: block;background-color: #4169E1;color: white;margin:5px 0;width: 60px;height: 30px;text-decoration: none;text-align: center;line-height: 30px;}
a:hover{background-color: aqua;color: #000000;}
.louc{background-color: aqua;color: #000000;}
</style>
<body>
<ul id="ul">
<li style="background-color: #0C4E7C;" id="f1">第一屏</li>
<li style="background-color: #dd5353;" id="f2">第二屏</li>
<li style="background-color: #7FFFD4;" id="f3">第三屏</li>
</ul>
<p id="p">
<a class="louc">一楼</a>
<a >二楼</a>
<a >三楼</a>
</p>
<script type="text/javascript">
$('#p a').click(function(){
var ind = $('#p a').index(this)+1;
var topVal = $('#f'+ind).offset().top;
$('body,html').stop().animate({scrollTop:topVal},1000)
})
$(window).scroll(scrolls)
function scrolls(){
var f1,f2,f3,f4,f5,f6,f7;
var fixRight = $('#p a');
var sTop = $(window).scrollTop();
fl = $('#f1').offset().top;
f2 = $('#f2').offset().top;
f3 = $('#f3').offset().top;
if(sTop>=fl){
fixRight.eq(0).addClass('louc').siblings().removeClass('louc');
}
if(sTop>=f2-100){
fixRight.eq(1).addClass('louc').siblings().removeClass('louc');
}
if(sTop>=f3-100){
fixRight.eq(2).addClass('louc').siblings().removeClass('louc');
}
}
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
