css代码
<style>
body,div,ul,li{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url(img/004.JPG) center cover;
}
#fullpage{
width:100%;
position: fixed;/*没有滚动条*/
top:50px;
transition:all 1s ease-in-out;
}
div{
width:100%;
}
.box1{
background: #f0c8ec;
}
.box2{
background: #db9def;
}
.box3{
background: #c2acf4;
}
.box4{
background: #acc9f4;
}
.box5{
background: #acf4f3;
}
.box6{
background: #acf4d0;
}
.box7{
background: #ecf4ac;
}
.nav{
width:100%;
height: 50px;
background: red;
position: fixed;
top:0;
z-index: 99;
}
.nav li{
width:120px;
height: 50px;
list-style: none;
font-size: 20px;
color: white;
font-weight: bold;
text-align: center;
line-height: 50px;
float: left;
}
</style>
html代码
<ul class="nav">
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
<li>nav5</li>
<li>nav6</li>
<li>nav7</li>
</ul>
<div id="fullpage">
<div class="box1">second1</div>
<div class="box2">second2</div>
<div class="box3">second3</div>
<div class="box4">second4</div>
<div class="box5">second5</div>
<div class="box6">second6</div>
<div class="box7">second7</div>
</div>
javascript代码
<script type="text/javascript">
var _fullpage = document.getElementById("fullpage");
var _div = _fullpage.getElementsByTagName("div");
var _lis = document.getElementsByTagName("li");
var h = (window.innerHeight || document.documentElement.clientHeight) - 50;
_lis[0].style.backgroundColor = "#000";
for(var i = 0;i < _div.length;i++){
_div[i].style.height = h + "px";
}
function addE(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn);
}else if(attachEvent){
obj.attachEvent("on" + type,fn);
}
}
addE(document,"mousewheel",wheel);
addE(document,"DOMMouseScroll",wheel);
//滚轮事件
function getWD(evt){
var e = evt || window.event;
if(e.wheelDelta){
return e.wheelDelta;
}else if(e.detail){
return -e.detail*40;
}
}
for(var k = 0;k < _lis.length;k++){
var a = _lis[k]; //获得索引号
a.index = k;
a.onmouseover =function(){
clic(this.index);
check(this.index);
}
}
function clic(n){
_fullpage.style.top = -h * n + 50 + "px";
}
function check(s){
for(var b = 0;b < _lis.length;b++){
if(b == s){
_lis[b].style.backgroundColor = "#000";
}else{
_lis[b].style.backgroundColor = "transparent";
}
}
}
var j=0;
function wheel(ev){
if(getWD(ev) < 0){
j++;
}
if(getWD(ev) > 0){
j--;
}
if(j >= 7){
j = 0;
}
if(j < 0){
j = 6;
}
_fullpage.style.top = -h * j + 50 + "px";
check(j);
}
</script>