html css纵向滑动列表,css3页面鼠标纵向滑动效果

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

• 1
• 2
• 3
• 4
• 5

«

$(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)

}

})

非原著作