javascript实现全屏滚动功能

来源：动视网责编：小采时间：2020-11-27 20:03:57

javascript实现全屏滚动功能

javascript实现全屏滚动功能:本文主要和大家介绍原生javascript实现的全屏滚动功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下，希望能帮助到大家，原理：1. 计算当前浏览器屏幕高度，每次翻页显示的内容高度即为屏幕高度2. 对鼠标滚轮事件进行

推荐度：

点击下载本文 文档为doc格式

导读javascript实现全屏滚动功能:本文主要和大家介绍原生javascript实现的全屏滚动功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下，希望能帮助到大家，原理：1. 计算当前浏览器屏幕高度，每次翻页显示的内容高度即为屏幕高度2. 对鼠标滚轮事件进行

本文主要和大家介绍原生javascript实现的全屏滚动功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下，希望能帮助到大家，

原理：

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代码：

javascript实现全屏滚动功能

推荐度：

点击下载本文 文档为doc格式

标签：功能全屏实现

热门焦点

javascript实现全屏滚动功能

javascript实现全屏滚动功能

javascript实现全屏滚动功能

最新推荐

猜你喜欢

热门推荐