【实例】原生 js 实现全屏滚动效果

其他，插件：http://www.dowebok.com/77.html

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

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

废话不多说，直接上代码

html代码：

 1     <span style="font-size:18px;"><span style="font-size:14px;"><div id="wrap">
 2         <div id="main" style="top: 0;">
 3             <div class="content num1">
 4                 <img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%">
 5             </div>
 6             <div class="content num2">
 7                 <img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%">
 8             </div>
 9             <div class="content num3">
10                 <img src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg" width="100%" height="100%">
11             </div>
12             <div class="content num4">
13                 <img src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg" width="100%" height="100%">
14             </div>
15         </div>
16     </div></span></span>

css代码：

1     <span style="font-size:14px;">#wrap{overflow: hidden;width: 100%;}
2     #main{top: 0;position: relative;}
3     .content{width: 100%;margin: 0;height: 100%;}
4     .num1{background: #e8e8e8;}
5     .num2{background: pink;}
6     .num3{background: yellow;}
7     .num4{background: orange;}</span>

js代码：

 1     <span style="font-size:14px;"><script type="text/javascript">
 2         var wrap = document.getElementById("wrap");
 3
 4         var divHeight = window.innerHeight;
 5
 6         wrap.style.height = divHeight + "px";
 7
 8         var content = $(".content");//懒得写获取类的原生js代码了，直接用了jquery，=。=
 9
10         content.height(divHeight);
11
12         var startTime = 0, //开始翻屏时间
13             endTime = 0,
14             now = 0;
15
16         if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){
17             //for firefox;
18             document.addEventListener("DOMMouseScroll",scrollFun,false);
19
20         }
21         else if (document.addEventListener) {
22
23             document.addEventListener("mousewheel",scrollFun,false);
24
25         }
26         else if (document.attachEvent) {
27
28             document.attachEvent("onmousewheel",scrollFun);
29
30         }
31         else{
32
33             document.onmousewheel = scrollFun;
34
35         }
36
37         //滚动事件处理函数
38         function scrollFun(event){
39
40                 startTime = new Date().getTime();
41
42                 var delta = event.detail || (-event.wheelDelta);
43
44                 if ((endTime - startTime) < -1000) {
45                     //1秒内执行一次翻页
46
47                     if (delta > 0 && parseInt(main.style.top) > -divHeight * ( content.length - 1)) { //向下翻页
48
49                         now += divHeight ;
50
51                         turnPage(now);
52
53                     }
54
55                     if (delta < 0 && parseInt(main.style.top) < 0) { //向上翻页
56
57                         now -= divHeight ;
58
59                         turnPage(now);
60
61                     }
62
63                     endTime = new Date().getTime();
64
65                 }
66                 else{
67
68                     event.preventDefault();
69
70                 }
71
72         }
73
74         //翻页函数
75         function turnPage(now){
76
77             $("#main").animate({top:(-now+'px')},1000);
78
79             //懒得写动画代码了，直接用了jquery</span><span style="font-size:14px;">，=。=
80         }
81     </script></span>

转载于:https://www.cnblogs.com/LeeHT/p/6202535.html

【实例】原生 js 实现全屏滚动效果相关推荐

html5 滚屏效果插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示的HTML 布局以及js 代码 //需要连接连接的三个文件 //css文件 / ...
原生JS实现全屏视频背景滚动淡出
给大家分享一个用原生JS实现全屏视频背景滚动淡出,效果如下 : 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&qu ...
pagePiling.js - 创建美丽的全屏滚动效果
在线演示在线演示本地下载全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...
html5页面可见xing,【前端资源网页插件】全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了类似全屏滚动效果尤其在微信里面我自己开发了一个快速构建此类项目的控件与市面上大部分控件不同的是此控件还支持元素的动画效果并提供多种元素效果基于zepto. ...
web端原生js实现全屏和退出全屏（F11功能）
一.在项目中使用按钮进行控制全屏功能 1. 选中要实现全屏功能的元素(一般是一个按钮) var $fullBtn = document.querySelector('.fullBtn') //全屏按钮 ...
原生JS实现全屏和退出全屏详解
全屏滚动fullpage.js
目前很多网站都会有全屏滚动的效果,比如京东的楼梯效果,很多网页我们看到的可以通过点击导航定位到具体的一屏的这样的效果,很多官网也会有这样的效果出现,最近我也做了一个需要全屏滚动效果的官网 1:当鼠标滑 ...
fullPage 实现全屏滚动
参考demo网址: http://www.dowebok.com/demo/2014/77/ api说明地址: http://www.dowebok.com/77.html 一.基础演示 <!D ...
vue 组件封装 | s-fullpage 全屏滚动（内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
目录目标实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例范例效果目标实现类似插 ...
php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法,文中给出了完整的实例代码,相信对大家的理解和学习具有一定的参考价值,需要的朋友们可以参考借鉴,下面来一起看看吧. 前言单页 ...

【实例】原生 js 实现全屏滚动效果

【实例】原生 js 实现全屏滚动效果相关推荐

最新文章

热门文章