资讯专栏INFORMATION COLUMN

原生javascript实现简单的全屏效果

aristark / 1386人阅读

摘要:要实现全屏滚动的效果,无非是让每页的内容页高度达到浏览器窗口的高度。通过判断鼠标滚动事件来设置定时器运动方式。每页高度在实现滚轮的时候存在兼容性的问题,首先,对于鼠标滚动事件,有自己的解决方法,方法叫,鼠标滚动的时候触发。

要实现全屏滚动的效果,无非是让每页的内容页高度达到浏览器窗口的高度。通过判断鼠标滚动事件来设置定时器运动方式。
基本的html结构:

CSS:

*{
    margin:0;
    padding:0;
 }
#wrap{
    overflow: hidden;
    width:100%;
}
#main{
    height:100%;
    top:0;
    position: relative;
}
.page{
    width:100%;
    margin:0;
}
#page1{
    background:#555;
}
#page2{
    background:#6CE26C;
}
#page3{
    background:#fcfc46;
}
#page4{
    background:#ff0000;
}

如上,需要设置每个page项的高度大小都为窗口高度大小,并且,最外层容器,也就是wrap的高度也是一样,如果漏了设置wrap高度,每页的高度也是正常的,但是最后滚动的时候实际上会漏出其他页的内容。

var wrap = document.getElementById("wrap");
var main = document.getElementById("main");
var pages = main.getElementsByClassName("page");
var pageLen = pages.length;
var pageH = document.body.clientHeight||document.documentElement.clientHeight;
wrap.style.height = pageH + "px";
console.log("wrap:"+wrap.style.height);
for(var i=0;i

javascript在实现滚轮的时候存在兼容性的问题,首先,对于鼠标滚动事件,firefox有自己的解决方法,方法叫DOMMouseScroll,鼠标滚动的时候触发。其有关鼠标滚轮的信息则保存在detail属性中,当向前滚动滚轮时,其值为-3的倍数,当向后滚动滚轮时,其值为3的倍数。
其他浏览器(包括烦人的IE6、7)有一个名叫“mousewheel”的事件,该事件可以在任何元素上触发,而且可以冒泡(前面那个DOMMouseScroll也可以),该事件有一个属性叫“wheelDelta”,向上滚动鼠标滚轮时,wheelDelta是120的倍数;向下滚动鼠标滚轮时,wheelDelta是-120的倍数。
为了兼容,可以通过下面的方式:

if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){   
    document.addEventListener("DOMMouseScroll",scrollFun,false);        
}else if (document.addEventListener) {  
    document.addEventListener("mousewheel",scrollFun,false);  
}else if (document.attachEvent) {  
    document.attachEvent("onmousewheel",scrollFun);   
}else{  
    document.onmousewheel = scrollFun;  
} 

滚动事件处理函数无非就是判断wheelDelta和delta的值还有外部容器main.offsetTop的值,然后触发动画效果,这里要注意,为了防止多次触发,比如用户在短时间内疯狂滚滚轮,然而不想要疯狂触发,那么需要在触发动画前后通过定时器设定阀值。
具体的实现参考下面代码,已经有注释了:

var wrap = document.getElementById("wrap");
var main = document.getElementById("main");
var pages = main.getElementsByClassName("page");
var pageLen = pages.length;
var pageH = document.body.clientHeight||document.documentElement.clientHeight;
wrap.style.height = pageH + "px";  //注意
console.log("wrap:"+wrap.style.height);
for(var i=0;i0 && parseInt(main.offsetTop) > -(pageH*(pageLen-1))){
            //向下滚动
            now = now - pageH; //向下翻过一页
            toPage(now,"down");
            console.log("wrap:"+wrap.style.height);
            //console.log("down.now:"+now);
            //console.log("main:"+main.offsetTop);
        } 
        if(delta<0 && parseInt(main.offsetTop) < 0){
            //向上滚动
            now = now + pageH;
            toPage(now,"up");
        }
        endTime = new Date().getTime();  //重置时间
    }else{  
        event.preventDefault();    
    }    
}
var sliderTime = null;
function toPage(now,direction){    
    clearInterval(sliderTime);//执行当前动画同时清除之前的动画
    sliderTime = setInterval(function(){
        var speed = 0;
        if(direction == "down"){
            if(now<0 && now < main.offsetTop){
                speed = -10;
                main.style.top = main.offsetTop+speed + "px";
                if(main.style.top<=now){
                    main.style.top = now + "px";
                }
            }else{  //当now的高度达到整个页面高度,结束运动
                main.style.top = now + "px";
                speed = 0;
                clearInterval(sliderTime);
            }
        }else{
            if(now<=0 && now >= main.offsetTop){
                speed = 10;
                main.style.top = main.offsetTop+speed + "px";
                if(main.style.top>=now){                    
                    main.style.top = now + "px";
                }
            }else{
                main.style.top = now + "px";
                speed = 0;
                clearInterval(sliderTime);
            }
        }        
    },10);
}   

上面的toPage方法是带缓冲的效果,粗暴的方法不带缓冲:

function toPageNow(now){        
        // $("#main").animate({top:(now+"px")},1000);     //jquery实现动画效果
         setTimeout("main.style.top = now + "px"",1000);     //javascript 实现动画效果
    }   

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88869.html

相关文章

  • WebView实现全屏播放的一种方法

    摘要:今天来介绍一种简单易行粗暴的方式来实现的视频全屏播放。通过在一些主流视频网站上的测试,在爱奇艺,土豆,芒果,等可正常全屏,在腾讯,乐视,等网站仍然无法全屏。经测试,腾讯和没有问题了,乐视和仍然不可以全屏,即使已经找到了全屏按钮的标识。   用过WebView的开发者们肯定都知道这里面的坑数不胜数,加载缓慢,内存泄露,文件选择......没错,全屏播放视频,这又是一个大坑。一个没有修饰过...

    baoxl 评论0 收藏0
  • WebView实现全屏播放的一种方法

    摘要:今天来介绍一种简单易行粗暴的方式来实现的视频全屏播放。通过在一些主流视频网站上的测试,在爱奇艺,土豆,芒果,等可正常全屏,在腾讯,乐视,等网站仍然无法全屏。经测试,腾讯和没有问题了,乐视和仍然不可以全屏,即使已经找到了全屏按钮的标识。   用过WebView的开发者们肯定都知道这里面的坑数不胜数,加载缓慢,内存泄露,文件选择......没错,全屏播放视频,这又是一个大坑。一个没有修饰过...

    red_bricks 评论0 收藏0
  • h5视频播放踩坑记录

    随着抖音、快手这类的视频类app的火爆,移动端h5视频类应用也随之兴起,使用video播放的场景也越来越多,本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题,希望在看过这篇文章后,能对开发者在移动端使用video播放时快速开发减少踩坑 全屏播放 视频的全屏播放是移动端一个很常见的场景,因此我们需要对video设置全屏播放,全屏播放用到的方法是requestFullscre...

    wenshi11019 评论0 收藏0
  • h5视频播放踩坑记录

    随着抖音、快手这类的视频类app的火爆,移动端h5视频类应用也随之兴起,使用video播放的场景也越来越多,本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题,希望在看过这篇文章后,能对开发者在移动端使用video播放时快速开发减少踩坑 全屏播放 视频的全屏播放是移动端一个很常见的场景,因此我们需要对video设置全屏播放,全屏播放用到的方法是requestFullscre...

    heartFollower 评论0 收藏0

发表评论

0条评论

aristark

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<