时间:2021-07-01 10:21:17 帮助过:2人阅读
原理:
1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度
2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题。
废话不多说,直接上代码
html代码:
<p id="wrap"> <p id="main" style="top: 0;"> <p class="content num1"> <img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%"> </p> <p class="content num2"> <img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%"> </p> <p class="content num3"> <img src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg" width="100%" height="100%"> </p> <p class="content num4"> <img src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg" width="100%" height="100%"> </p> </p> </p>
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代码:
相关推荐:
jQuery插件fullPage.js实现全屏滚动效果
基于jquery实现全屏滚动效果_javascript技巧
jquery实现全屏滚动_jquery
以上就是javascript实现全屏滚动功能的详细内容,更多请关注Gxl网其它相关文章!