两句代码教你快速实现楼层效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.floor{width: 1000px;height: 500px;font:50px/500px "";text-align: center;}
.box1{background: #f00;}
.box2{background: #f0f;}
.box3{background: #ff0;}
.box4{background: #00f;}
.list{width: 100px;margin: 0;padding: 0;background: #ccc;
position: fixed;right: 0;top:200px;}
.list li{list-style: none;height: 40px;line-height: 40px;
text-align: center;border-bottom: solid 1px #fff;cursor: pointer;}
</style>
</head>
<body>
<div class="floor box1">男装</div>
<div class="floor box2">裤子</div>
<div class="floor box3">电脑</div>
<div class="floor box4">手机</div>
<ul class="list">
<li>男装</li>
<li>裤子</li>
<li>电脑</li>
<li>手机</li>
</ul>
</body>
<script src="../jQuery.js"></script>//需自行引入
<script type="text/javascript">
$(".list").children("li").click(function(){
// $(".floor").eq($(this).index()).offset().top
// $(document).scrollTop($(".floor").eq($(this).index()).offset().top);
// document没有animate方法
// 要向做动画
// 根元素要使用具体的标签
$("html").animate({
scrollTop:$(".floor").eq($(this).index()).offset().top
})
}
)
</script>
</html>
效果如下：
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
