本文实例讲述了原生javascript实现的全屏滚动功能。分享给大家供大家参考,具体如下:
原理:
1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度
2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题。
废话不多说,直接上代码
html代码:
![](https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg)
![](https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg)
![](https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg)
![](https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg)
css代码:
js代码:
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,=。=
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。