您的位置：首页 > Web前端 > JavaScript

JS实现全屏页面切换

2016-04-25 22:50 791 查看

以前在网上看到过一些全屏切换的页面，网上也有一些JQuery的插件能够实现全屏切换的效果，今天用原生js简单的做了一下这个效果。

1.实现原理

其实要做出这个效果还是挺简单的，下面来分析一下：

1.首先设置每个页面的div，让每个div的高度设置为100vh，即让每个div高度为窗口高度，或者可以设置每个div的高度为100%，但100%是相对父元素而言的，所以还需要给HTML、body的高度都设置为100%。

这个时候每个div的高度都是窗口高度了，但是大家看到的全屏切换一般都是没有滚动条的，就像是只有一个页面似的，所以还需要给body设置overflow：hidden的效果，这样就只显示一个页面。

2.然后在js部分要实现每次鼠标滚轮页面切换到下一个div，在js部分要处理好鼠标滚轮事件，获取窗口的高度，每次滚轮时，都让当前页面的高度增加一个窗口的高度。

2.实现步骤

下面展示一下我的代码，具体分析也写在了代码注释里：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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>页面1</h1>
</div>
<div class="section2">
<h1>页面2</h1>
</div>
<div class="section3">
<h1>页面3</h1>
</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>

这样的话一个最基本的全屏页面切换就做好了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航