css3纵向滚屏翻页，支持键盘，鼠标操作，写得好累，但还是不够完善，来自蓝靖宇宁
body{color:#222;-webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
body,button,input,select,textarea {font-family:Tahoma,Arial,Roboto,鈥滵roid Sans鈥�,鈥滺elvetica Neue鈥�,鈥滵roid Sans Fallback鈥�,鈥滺eiti SC鈥�,sans-self;font-size:62.5%; line-height:1.5;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
fieldset,img{border:0; display:inline-block;}
address,caption,cite,dfn,em,th,var{font-style:normal;font-weight:normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{display:block; margin:0; padding:0;}/* HTML5 /
code,kbd,pre,samp{font-family:courier new,courier,monospace}
ol,ul{list-style:none;}
a{text-decoration:none; color:#222;}
a:hover{color:#000;text-decoration: none;zoom:1}
a:active{color:#666;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,select,button{ vertical-align: baseline; vertical-align:middle;font-family: tahoma, \5b8b\4f53, arial; font-size: 100%; }
input[type=checkbox],input[type=radio]{vertical-align:middle; margin:0 5px;}
input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}textarea{resize:none;}
textarea{overflow:auto; font:100% tahoma,\5b8b\4f53,arial;}
table{border-collapse:collapse; border-spacing:0;}
/===reset end===/
html,body{ width:100%; height:100%; overflow:hidden;}
.section-wrap{width:100%; height:100%; overflow:visible;
transition:transform 1s cubic-bezier(0.86,0,0.03,1);
-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);
-ms-transition:-ms-transform 1s cubic-bezier(0.86,0,0.03,1);
-moz-transition:-moz-transform 1s cubic-bezier(0.86,0,0.03,1);
-o-transition:-o-transform 1s cubic-bezier(0.86,0,0.03,1);}
.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}
.section-wrap .section .title{padding:150px 0 0 50px; color:#fff; font-size:40px;text-align:center; font-family:"Microsoft YaHei";}
.section-wrap .section .title p{ opacity:0}
.section-wrap .section .title .p-2{color:#ccc; font-size:20px;}
.section-wrap .section .title.active .p-1{
opacity:1;transform:translateY(-25px);
-webkit-transform:translateY(-25px);
-ms-transform:translateY(-25px);
-moz-transform:translateY(-25px);
-o-transform:translateY(-25px);
transition:all 2s cubic-bezier(0.86,0,0.8,1);
-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);
-ms-transition:all 2s cubic-bezier(0.86,0,0.8,1);
-moz-transition:all 2s cubic-bezier(0.86,0,0.8,1);
-o-transition:all 2s cubic-bezier(0.86,0,0.8,1);}
.section-wrap .section .title.active .p-2{ opacity:1;
transform:translateY(-25px);
-webkit-transform:translateY(-25px);
-ms-transform:translateY(-25px);
-moz-transform:translateY(-25px);
-o-transform:translateY(-25px);
transition:all 2s cubic-bezier(0.5,0,0.9,1);
-webkit-transition:all 2s cubic-bezier(0.5,0,0.9,1);
-ms-transition:all 2s cubic-bezier(0.5,0,0.9,1);
-moz-transition:all 2s cubic-bezier(0.5,0,0.9,1);
-o-transition:all 2s cubic-bezier(0.5,0,0.9,1);}
.section-wrap .section-1{ background-color:#0066a5}
.section-wrap .section-2{ background-color:#065E69}
.section-wrap .section-3{ background-color:#0D2C7C}
.section-wrap .section-4{ background-color:#0C6242}
.section-wrap .section-5{ background-color:#413004}
.put-section-0{transform:translateY(0);
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
-moz-transform:translateY(0);
-o-transform:translateY(0); }
.put-section-1{transform:translateY(-100%);
-webkit-transform:translateY(-100%);
-ms-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);}
.put-section-2{transform:translateY(-200%);
-webkit-transform:translateY(-200%);
-ms-transform:translateY(-200%);
-moz-transform:translateY(-200%);
-o-transform:translateY(-200%);}
.put-section-3{transform:translateY(-300%);
-webkit-transform:translateY(-300%);
-ms-transform:translateY(-300%);
-moz-transform:translateY(-300%);
-o-transform:translateY(-300%);}
.put-section-4{transform:translateY(-400%);
-webkit-transform:translateY(-400%);
-ms-transform:translateY(-400%);
-moz-transform:translateY(-400%);
-o-transform:translateY(-400%);}
.section-btn{ position:fixed; right:40px;top:50%; width:14px;}
.section-btn li{margin-bottom:15px; background:#069052;text-align:center; color:#fff; cursor:pointer;}
.section-btn li.cur{ background:#0CEA87}
.go-btn{ opacity:1;
webkit-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-webkit-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-ms-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-moz-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-o-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
position:absolute;bottom:10px;left:48%;
width:60px; height:60px; border-radius:100%; line-height:60px; text-align:center; font-size:20px; color:#fff; border:1px solid #fff; cursor:pointer; overflow:hidden}
.go-btn:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
-ms-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
}
@keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
}
@-webkit-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
}
@-ms-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
}
@-moz-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
}
@-o-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
}
点右边的按钮,底部的按钮，滚动鼠标滚轮,按下键盘方向上下键查看效果
Just the way u are!
无论我们距离有多远，我都永远by your side!
I am just kidding!
I will never say never
From justin bieber
you are just like a angel
I tell you seriously
life sucks sometime somehow
I feel that
12345«
$(function(){
var btn_index=0;
/*右边按钮点击*/
$('.section-btn li').each(function(index) {
$(this).click(function(){
btn_index=index;
scroller();
})
});
/*翻页按钮点击*/
$('.go-btn').one('click',btn_go);
function btn_go(){
go_up();scroller();
setTimeout(function(){$('.go-btn').one('click',btn_go)},1000)
};
/*响应鼠标*/
$('.section-wrap').one('mousewheel',mouse_);
function mouse_(event){
if (event.deltaY<0) {go_up()}
else{go_down()}
scroller();
setTimeout(function(){$('.section-wrap').one('mousewheel',mouse_)},1000)
};
/*当前页面赋值*/
function go_up(){btn_index++;if(btn_index==$('.section-btn li').length){btn_index=$('.section-btn li').length-1};}
function go_down(){btn_index--;if(btn_index<0){btn_index=0};}
/*页面滑动*/
function scroller(){
$('.section-btn li').eq(btn_index).addClass('cur').siblings().removeClass('cur');
$('.section-wrap').attr("class","section-wrap").addClass(function() {
return "put-section-"+btn_index;
}).find('.section').eq(btn_index).find('.title').addClass('active');
};
/*响应键盘上下键*/
$(document).one('keydown',keyaction);
function keyaction(event){
var e=event||window.event;
var key=e.keyCode||e.which||e.charCode;
switch(key) {
case 38: go_down();scroller();
break;
case 40: go_up();scroller();
break;
};
setTimeout(function(){$(document).one('keydown',keyaction)},1000)
}
})
非原著作
