实现电梯导航效果代码

更新时间：2026-04-09 16:43:56作者：yezheng

本文实例讲述了CSS实现五颜六色按钮组成的导航条效果代码。分享给大家供大家参考。

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

$(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>

</ul>

</body>

</html>

手游推荐