话不多说，附上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/sp_common.css"/>
<style type="text/css">
body{
background: gray;
overflow: hidden;
}
.wrap-ul li{
width: 100%;
height: 100%;
color: #fff;
font-size: 50px;
text-align: center;
}
.wrap-ul li:first-child{
background: green;
}
.wrap-ul li:nth-child(2){
background: greenyellow;
}
.wrap-ul li:nth-child(3){
background: cyan;
}
.wrap-ul li:last-child{
background: darkslategray;
}
.item-ul{
height: 200px;
width: 50px;
position: fixed;
top: 45%;
right: 5%;
/*background: red;*/
}
.item-ul li{
width: 100%;
height: 25%;
line-height: 40px;
text-align: center;
color: white;
font-size: 18px;
border: 1px solid black;
border-radius: 50%;
margin-top: 2px;
cursor: pointer;
}
.li-active{
background: red;
color: #000000;
}
</style>
</head>
<body>
<ul class="wrap-ul w h">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
<ul class="item-ul">
<li class="li-active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('body,html').animate({scrollTop: 0}, 1000);
var index=0;
var scrollHeight=$(window).innerHeight();
$('.item-ul li').click(function(){
index=$(this).index();
console.log(index);
$(this).addClass('li-active').siblings().removeClass('li-active');
$('body,html').animate({scrollTop: scrollHeight*index}, 1000);
/*$('body').scrollTop(1000);*/
});
$(window).resize(function(){
var w=$(window).width();
var h=$(window).height();
$('.wrap-ul li').css({width:w,height:h});
$('body,html').scrollTop(h*index);
});
//以下两个兼容性代码可以做一些合并处理，我就没做了。
//ie（ev.wheelDelta）和chrome（ev.deltaY）滚动事件的兼容
document.body.addEventListener('mousewheel',function(ev){
console.log(ev);
if (ev.deltaY>0 || ev.wheelDelta<0) {
/*console.log('下滚');*/
if(!$(document.body).is(':animated'))moveNext();
} else{
/*console.log('上滚');*/
if(!$(document.body).is(':animated'))movePrev();
}
});
//firefox的滚动事件
document.body.addEventListener('DOMMouseScroll',function(ev){
if (ev.detail>0) {
console.log(3)
if(!$(document.body).is(':animated'))moveNext();
} else{
if(!$(document.body).is(':animated'))movePrev();
}
});
function moveNext(){
/* if(index==0){*/
if(index<3){
$('body,html').animate({scrollTop: scrollHeight*(++index)}, 1000);
}
$('.item-ul li:eq('+index+')').addClass('li-active').siblings().removeClass('li-active');
/* }*/
}
function movePrev(){
if(index>0){
$('body,html').animate({scrollTop: scrollHeight*(--index)}, 1000);
}
$('.item-ul li:eq('+index+')').addClass('li-active').siblings().removeClass('li-active');
}
</script>
</body>
</html>
其中的sp_common.css文件内容为：
/***********通用基本类1************/
/*格式化样式*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,button,fieldset,input,textarea,p,blockquote,table,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
header, footer, section, article, aside, nav, address, figure, figcaption, menu, details {display: block;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
a{text-decoration: none;}
a:hover{text-decoration:none;cursor: pointer;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
html{
font-size: 10px;
}
/*.box-main{
overflow: hidden;
}*/
html,body{
height: 100%;
width: 100%;
font-weight: normal;
}
*{
box-sizing: border-box;
}
.w{width:100%}
.h{height:100%}
/*------------ text -------------*/
.tl { text-align:left}
.tc { text-align:center}
.tr { text-align:right}
/*------------ float ------------*/
.fl{float:left;display:inline-block}
.fr{float:right;display:inline-block}
/*------------ clear-float ---------*/
/*.clear{content: ".";display: block;clear: both;}*/
.clear{*zoom:1;}
.clear::after {
content: "";
display: table;
clear: both;
}
.cursor{cursor: pointer;}
.border{border: 1px solid #CCCCCC}
.b-bottom{border-bottom: 1px solid #CCCCCC}
.b-top{border-top: 1px solid #CCCCCC}
.b-right{border-right: 1px solid #CCCCCC}
.b-left{border-left: 1px solid #CCCCCC}
.b-radius{border-radius: 50%}
/*------------ position ------------*/
.pr { position:relative;}
.pa { position:absolute;}
.pf { position: fixed;}
一开始我的html文件是这样命名的：“官网.html” 没错用了汉子。谷歌和火狐都能识别。ie识别不了，把“官网.html”改成 “dddd.html” 只要是英文，ie就打开了。原因就是你既然内容用的是utf-8，那么文件名也要符合utf-8的规范，，，本来想做一个滚轮事件的demo制作，没想到踩这个坑了！
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
