JS全画面切り替えを実現
11644 ワード
以前ネット上でいくつかのフルスクリーン切り替えのページを見たことがありますが、ネット上にもいくつかのJQueryのプラグインがフルスクリーン切り替えの効果を実現することができて、今日はオリジナルjsで簡単にこの効果をしました.
1.実現原理
実はこの効果を出すのはとても简単で、以下に分析します:1.まず各ページのdivを設定し、各divの高さを100 vhに設定します.すなわち、各divの高さをウィンドウの高さにするか、各divの高さを100%に設定することができますが、100%は親要素に対するものなので、HTML、bodyの高さを100%に設定する必要があります.このとき各divの高さはウィンドウの高さになりますが、一般的にはスクロールバーがなく、1ページしかないようにbodyにoverflow:hiddenの効果を設定する必要があります.これで1ページしか表示されません.2.次に、jsセクションでは、マウスホイールページを次のdivに切り替えるたびに、jsセクションでマウスホイールイベントを処理し、ウィンドウの高さを取得し、ホイールをスクロールするたびに、現在のページの高さを1つのウィンドウの高さに増やします.
2.実装手順
次に私のコードを示し、具体的な分析もコード注釈に書かれています.
これで最も基本的なフルスクリーンページ切り替えができます.
1.実現原理
実はこの効果を出すのはとても简単で、以下に分析します:1.まず各ページのdivを設定し、各divの高さを100 vhに設定します.すなわち、各divの高さをウィンドウの高さにするか、各divの高さを100%に設定することができますが、100%は親要素に対するものなので、HTML、bodyの高さを100%に設定する必要があります.このとき各divの高さはウィンドウの高さになりますが、一般的にはスクロールバーがなく、1ページしかないようにbodyにoverflow:hiddenの効果を設定する必要があります.これで1ページしか表示されません.2.次に、jsセクションでは、マウスホイールページを次のdivに切り替えるたびに、jsセクションでマウスホイールイベントを処理し、ウィンドウの高さを取得し、ホイールをスクロールするたびに、現在のページの高さを1つのウィンドウの高さに増やします.
2.実装手順
次に私のコードを示し、具体的な分析もコード注釈に書かれています.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
/*CSSreset 0*/
*{
margin:0;
padding:0;
}
/* */
body{
overflow:hidden;
}
/* div */
div{
height:100vh;
}
/* div */
.section1{
background:#eee;
}
.section2{
background:lightblue;
}
.section3{
background:lightgreen;
}
style>
head>
<body>
<div class="section1">
<h1> 1h1>
div>
<div class="section2">
<h1> 2h1>
div>
<div class="section3">
<h1> 3h1>
div>
<script type="text/javascript">
var ismoving=false;//
var pageH=document.documentElement.clientHeight;//
var allheight=document.documentElement.scrollHeight;//
//
var scrollFunc=function(e){
e=e||window.event;
if(ismoving){//
return;
}else{
// IE， (wheelDelta) FireFox (detail)
if(e.wheelDelta>0||e.detail<0){//
// alert(" ");
var current=window.pageYOffset;// Y
if(current==0){//
return;
}
pageScroll(-1,current);//
}
if(e.wheelDelta<0||e.detail>0){//
// alert(" ");
var current=window.pageYOffset;
if(current==allheight-pageH){//
return;
}
pageScroll(1,current);
}
}
}
//
window.onresize=function(){
pageH=document.documentElement.clientHeight;
}
//
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
// scrollFunc
window.onmousewheel=document.onmousewheel=scrollFunc;
// window.onmousewheel=scrollFunc;
//
var timer=null;
function pageScroll(speed,current){
ismoving=true;//
if(speed>0){//
var allH=current+pageH;//
//
timer=setInterval(function(){
var cur=window.pageYOffset;// Y
window.scrollTo(0,cur+speed);// Y speed
// ease-in-out ，
if(cur > (allH-(pageH/2))){
speed--;
}else{
speed++;
}
// Y
if(cur >= allH){
clearInterval(timer);//
window.scrollTo(0,allH);//
ismoving=false;//
}
},15)
}else{
// ， ，
var allH=current-pageH;
timer=setInterval(function(){
var cur=window.pageYOffset;
window.scrollTo(0,cur+speed);
if(cur < (allH+(pageH/2))){
speed++;
}else{
speed--;
}
if(cur <= allH){
clearInterval(timer);
window.scrollTo(0,allH);
ismoving=false;
}
},15)
}
}
script>
body>
html>これで最も基本的なフルスクリーンページ切り替えができます.