模仿360安全换机
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>360安全换机</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
html{
height: 100%;
}
body{
width: 100%;
height: 100%;
overflow: hidden;
min-width: 900px;
}
#bg{
position: absolute;
top: 0;
left: 0;
}
#bg,#bg div{
width: 100%;
height: 100%;
background-position: center center;
background-attachment: fixed;
}
#bg .bg1{
background: url(img/1.jpg);
}
#bg .bg2{
background: url(img/2.jpg);
}
#bg .bg3{
background: url(img/3.jpg);
}
#bg .bg4{
background: url(img/4.jpg);
}
#nav{
width: 100%;
height: 47px;
position: fixed;
top: 30px;
left: 0;
z-index: 99;
}
#nav .logo{
float: left;
margin-left: 50px;
width: 226px;
height: 47px;
}
#nav .main{
width: 400px;
height: 47px;
float: right;
position: relative;
z-index: 10;
}
#nav .main ul li{
float: left;
line-height: 47px;
margin-left: 53px;
}
#nav .main ul li:hover{
color: #fff;
}
#nav .main ul li a{
color: rgba(255,255,255,.8);
text-shadow: 1px 1px 5px #000;
font-size: 14px;
position: relative;
z-index: 9;
}
#nav .main .border{
width: 56px;
height: 30px;
border: 1px solid rgba(255,255,255,.8);
border-radius: 15px;
position: absolute;
top: 9px;
left: 38px;
z-index: 8;
}
#slide{
width: 100px;
height: 330px;
position: fixed;
left: 50px;
top: 28%;
background: url(img/nav.png) no-repeat;
padding-top: 6px;
}
#slide ul li{
font-size: 12px;
color: rgba(255,255,255,0.8);
text-shadow: 1px 1px 1px #000;
padding-left: 50px;
cursor: pointer;
height: 21px;
line-height: 21px;
margin-bottom: 56px;
}
#slide ul li.on{
background: url(img/nav_cho.png) no-repeat;
}
</style>
</head>
<body>
<div id="nav">
<div class="logo"><a href=""><img src="img/logo.png" alt="" /></a></div>
<div class="main">
<ul>
<li><a href="">首页</a></li>
<li><a href="">常见问题</a></li>
<li><a href="">论坛</a></li>
<li><a href="">360首页</a></li>
</ul>
<div class="border"></div>
</div>
</div>
<div id="bg">
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
</div>
<div id="slide">
<ul>
<li>安全换机</li>
<li>无网对传</li>
<li>隐私粉碎</li>
<li>一键转移</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
(function(){
var $mainLi = $('#nav .main ul li')
var $border = $('#nav .border');
var $main = $('#nav .main');
var index = 0 ;
var $slideLi = $('#slide ul li');
$slideLi.eq(0).addClass('on');
var $bg = $('#bg');
$mainLi.mouseenter(function(){
var left = $(this).position().left; //获取相对于父级元素的位置
var width = $(this).width();//获取当前元素的宽度
$border.stop().animate({
left:left+38+'px',
width:width+28+'px'
},300)
});
$slideLi.click(function(){
index = $(this).index();
$(this).addClass('on').siblings().removeClass('on');
$bg.stop().animate({
top:-index * $(window).height()+'px'
},800);
})
$main.mouseleave(function(){
$border.stop().animate({
left:'38px',
width:'56px'
},300);
});
$(document).mousewheel(function(e,d){
if (d < 0) {
index++;
index %= $slideLi.length;
} else{
index--;
if(index <0){
index = $slideLi.length - 1;
}
}
$bg.stop().animate({
top:-index * $(window).height()+'px'
},800);
$slideLi.eq(index).addClass('on').siblings().removeClass('on');
})
$(window).resize(function(){
$bg.css('top',-index * $(window).height()+'px');
})
})()
</script>
</body>
</html>
效果如下，用到的图片,从360换机的官网上扒下来就行，改改图片名字
