原生javascript实现的全屏滚动功能示例
程序员文章站
2022-07-06 20:45:26
本文实例讲述了原生javascript实现的全屏滚动功能。分享给大家供大家参考,具体如下:
原理:
1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度...
本文实例讲述了原生javascript实现的全屏滚动功能。分享给大家供大家参考,具体如下:
原理:
1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度
2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题。
废话不多说,直接上代码
html代码:
<div id="wrap"> <div id="main" style="top: 0;"> <div class="content num1"> <img src="https://www.bing.com/az/hprichbg/rb/singingringingtree_zh-cn12497946624_1920x1080.jpg" width="100%" height="100%"> </div> <div class="content num2"> <img src="https://www.bing.com/az/hprichbg/rb/shenandoahnp_zh-cn9981989975_1920x1080.jpg" width="100%" height="100%"> </div> <div class="content num3"> <img src="https://www.bing.com/az/hprichbg/rb/garesaintlazare_zh-cn6611772290_1920x1080.jpg" width="100%" height="100%"> </div> <div class="content num4"> <img src="https://www.bing.com/az/hprichbg/rb/friendshipsquare_zh-cn8820626148_1920x1080.jpg" width="100%" height="100%"> </div> </div> </div>
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代码:
<script type="text/javascript"> var wrap = document.getelementbyid("wrap"); var divheight = window.innerheight; wrap.style.height = divheight + "px"; var content = $(".content");//懒得写获取类的原生js代码了,直接用了jquery,=。= content.height(divheight); var starttime = 0, //开始翻屏时间 endtime = 0, now = 0; if ((navigator.useragent.tolowercase().indexof("firefox")!=-1)){ //for firefox; 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; } //滚动事件处理函数 function scrollfun(event){ starttime = new date().gettime(); var delta = 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 = new date().gettime(); } else{ event.preventdefault(); } } //翻页函数 function turnpage(now){ $("#main").animate({top:(-now+'px')},1000); //懒得写动画代码了,直接用了jquery,=。= } </script>
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。