分类分类
2015-10-22 16:00作者：yezheng
本文实例讲述了CSS实现五颜六色按钮组成的导航条效果代码。分享给大家供大家参考。
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
var num=0;
var div_t=new Array();
var div_b=new Array();
for(var i=0;i<$('div').length;i++){
//alert($('#div'+(i+1))[0].offsetTop)
div_t[i]=$('#div'+(i+1))[0].offsetTop-$('li:eq('+i+')')[0].offsetTop;
div_b[i]=$('#div'+(i+1))[0].offsetTop+$('#div'+(i+1))[0].offsetHeight-$('li:eq('+i+')')[0].offsetTop-$('li:eq('+i+')')[0].offsetHeight;
if($(window).scrollTop()>div_t[i] && $(window).scrollTop()<div_b[i]){
$('li').css("background","#fff");
$('li:eq('+i+')').css("background","#C60");
}
}
})
$('li').click(function(){
var n=$(this).index();
$(window).scrollTop($('#div'+(n+1))[0].offsetTop-this.offsetTop);
$('li').css("background","#fff");
$(this).css("background","#C60");
})
})
</script>
<style>
*{margin:0;}
div{
font-size:80px;text-align:center;width:800px;margin:0 auto;border:3px solid #ccc;
}
ul{
position:fixed;top:20px;left:0px;
}
li{
list-style:none;width:50px;height:50px;line-height:50px;text-align:center; border:3px solid #ccc;
}
</style>
</head>
<body>
<ul>
<li> div1</li>
<li>div2</li>
<li>div3</li>
<li>div4</li>
<li>div5</li>
<li>div6</li>
<li>div7</li>
<li>div8</li>
<li>div9</li>
</ul>
<div id="div1" style="height:500px;">div1</div>
<div id="div2" style="height:300px;">div2</div>
<div id="div3" style="height:400px;">div3</div>
<div id="div4" style="height:100px;">div4</div>
<div id="div5" style="height:500px;">div5</div>
<div id="div6" style="height:800px;">div6</div>
<div id="div7" style="height:600px;">div7</div>
<div id="div8" style="height:700px;">div8</div>
<div id="div9" style="height:500px;">div9</div>
</body>
</html>
相关