js实现全屏滚动上下切换页面效果代码
代码语言：html
所属分类：布局界面
代码描述：js实现全屏滚动上下切换页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/body,html{margin:0;padding:0;font-family:'roboto'}body{height:100%;width:100%;user-select:none;overflow-y:hidden;touch-action:none;overscroll-behavior-y:contain}h1{font-size:calc(2em+1vw);margin:0;padding:0;text-align:center}p{font-weight:100;font-size:calc(1em+0.5vw);text-align:center}#wholepage{display:block;width:100%;height:100%;position:fixed;overflow:hidden}section,.section{display:flex;flex-direction:row;width:100%;height:100%;overflow:hidden;transform:translate(0,0);transition:transform .4s ease-out;margin:0;padding:0}.page{flex:1 0 100%;display:flex;flex-direction:column;width:100%;height:100%;justify-content:center;align-items:center;transform:translate(0,0);transition:transform .4s ease-out}.sectionButtonContainer{position:fixed;display:flex;flex-direction:column;top:50%;right:3vw;color:#1e1e1e;-webkit-tap-highlight-color:rgba(255,255,255,0)}.sectionButtonContainer label,.page_selection label{display:inline-flex;width:4px;height:4px;border-radius:50%;background:rgb(255,255,255,0.8);transition:transform .2s;margin:12px 12px;padding:0;box-shadow:0 0 8px rgba(0,27,160,0.8);cursor:pointer}.sectionButtonContainer label::after,.page_selection label::after{content:'';display:inline-flex;position:relative;top:-10px;left:-10px;padding:12px}.sectionButtonContainer input[type=radio]:checked+label::after,.page_selection input[type=radio]:checked+label::after{display:none}.sectionButtonContainer input[type=radio]:checked+label,.page_selection input[type=radio]:checked+label{transform:scale(2.2);transition:transform .2s}.page_selection{position:absolute;display:flex;flex-direction:row;bottom:2vh;left:40%;color:#1e1e1e;-webkit-tap-highlight-color:rgba(255,255,255,0);z-index:999999}
</style>
</head>
<body>
<div id="wholepage">
<section>
<div class="page">
<h1>This is a first section</h1>
<p>..and you can slide to the left or down</p>
</div>
<div class="page">
<h1>Hi!This is second page of first section!</h1>
<p>How are you?</p>
</div>
<div class="page">
<h1>..still first section</h1>
<p>but 3rd page..</p>
</div>
</section>
<section>
<div class="page">
<h1>Oh!You scrolled - nice!</h1>
<p>you can try even lower..</p>
</div>
<div class="page">
<h1>Nice!</h1>
<p>This is a second page of 2nd section</p>
</div>
<div class="page">
<h1>You are a brave [wo]man!</h1>
<p>scroll
< back or down.. or up</p>
</div>
</section>
<section>
<div .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0