好资源导航 » 文章资讯 » 原生javascript实现的全屏滚动功能示例

原生javascript实现的全屏滚动功能示例

2023-09-24 11:23:07 51

本文实例讲述了原生javascript实现的全屏滚动功能。分享给大家供大家参考，具体如下：

原理：

1.计算当前浏览器屏幕高度，每次翻页显示的内容高度即为屏幕高度

2.对鼠标滚轮事件进行监听，注意滚轮事件的浏览器兼容问题。

废话不多说，直接上代码

html代码：

css代码：

#wrap{overflow:hidden;width:100%;}
#main{top:0;position:relative;}
.content{width:100%;margin:0;height:100%;}
.num1{background:#e8e8e8;}
.num2{background:pink;}
.num3{background:yellow;}
.num4{background:orange;}

js代码：


varwrap=document.getElementById("wrap");
vardivHeight=window.innerHeight;
wrap.style.height=divHeight+"px";
varcontent=$(".content");//懒得写获取类的原生js代码了，直接用了jquery，=。=
content.height(divHeight);
varstartTime=0,//开始翻屏时间
endTime=0,
now=0;
if((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){
//forfirefox;
document.addEventListener("DOMMouseScroll",scrollFun,false);
}
elseif(document.addEventListener){
document.addEventListener("mousewheel",scrollFun,false);
}
elseif(document.attachEvent){
document.attachEvent("onmousewheel",scrollFun);
}
else{
document.onmousewheel=scrollFun;
}
//滚动事件处理函数
functionscrollFun(event){
startTime=newDate().getTime();
vardelta=event.detail||(-event.wheelDelta);
if((endTime-startTime)<-1000){
//1秒内执行一次翻页
if(delta>0&&parseInt(main.style.top)>-divHeight*(content.length-1)){//向下翻页
now+=divHeight;
turnPage(now);
}
if(delta<0&&parseInt(main.style.top)<0){//向上翻页
now-=divHeight;
turnPage(now);
}
endTime=newDate().getTime();
}
else{
event.preventDefault();
}
}
//翻页函数
functionturnPage(now){
$("#main").animate({top:(-now+'px')},1000);
//懒得写动画代码了，直接用了jquery，=。=
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

原生javascript实现的全屏滚动功能示例

热门推荐

随机推荐