<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="loucen.css" />
<script src="jquery-2.1.0.js"></script>
<script src="loucen.js"></script>
</head>
<body>
<div class="header">header</div>
<div class="main">
<div class="mainbox" style="background:palegoldenrod">1</div>
<div class="mainbox" style="background:palegreen">2</div>
<div class="mainbox" style="background:paleturquoise">3</div>
<div class="mainbox" style="background:palevioletred">4</div>
<div class="mainbox" style="background:papayawhip">5</div>
<div class="mainbox" style="background:peru">6</div>
<div class="mainbox" style="background:plum">7</div>
</div>
<div class="footer">footer</div>
<ul>
<li class="btn">
<span class="first">1F</span>
<span class="second">美妆</span>
</li>
<li class="btn">
<span class="first">2F</span>
<span class="second">家电</span>
</li>
<li class="btn">
<span class="first">3F</span>
<span class="second">女装</span>
</li>
<li class="btn">
<span class="first">4F</span>
<span class="second">美食</span>
</li>
<li class="btn">
<span class="first">5F</span>
<span class="second">汽车</span>
</li>
<li class="btn">
<span class="first">6F</span>
<span class="second">家具</span>
</li>
<li class="btn">
<span class="first">7F</span>
<span class="second">生活</span>
</li>
<li class="last">Top</li>
</ul>
</body>
</html>
css样式表
*{margin:0;padding: 0;}
ul li{
list-style:none;
}
.header,.footer{
100%;
height: 400px;
background: #ccc;
text-align: center;
color: #000;
line-height: 400px;
font-size: 70px;
}
.mainbox{
100%;
height: 600px;
text-align: center;
color: #a55;
line-height: 600px;
font-size: 70px;
font-weight: bold;
margin: 0 auto;
}
ul{
position: fixed;
30px;
border: 1px solid purple;
right: 8%;
top: 200px;
}
ul{
display: none;
}
ul li{
30px;
height: 30px;
text-align: center;
line-height:30px;
overflow: hidden;
background: #fff;
}
li.btn{
border-bottom:1px solid purple;
font-size: 12px;
}
.last{
font-size: 16px;
font-weight: bold;
}
span{
display: block;
30px;
height: 30px;
}
.second{
background:purple;
color:#fff;
}
.focus{
display: none;
}
.active{
display: none;
}
jQuery特效js
$(function(){
$(".btn").hover(function(){
$(this).find(".first").addClass("focus")
},function(){
$(this).find(".first").removeClass("focus")
})
$(document).scroll(function(){
var tops=$(this).scrollTop();
if(tops>=200){
$("ul").show(700)
}else{
$("ul").hide(700)
}
$(".mainbox").each(function(i,o){
var bTop=$(o).offset().top;
if(tops>=bTop){
$(".first").removeClass("active").eq(i).addClass("active")
}
})
})
$(".btn").click(function(){
var index=$(this).index();
var topss=$(".mainbox").eq(index).offset().top;
$("html,body").stop().animate({scrollTop:topss},800)
})
$(".last").click(function(){
$("html,body").stop().animate({scrollTop:0},800)
})
})