javascript实现全屏页面滚动效果

在我读完javaScript DOM之后,对解释型的javaScript脚本语言有了更加深刻的感悟和理解,并使我的javaScript代码更加规范化。

接下来,我们转入今天我要分享的技术性问题:全屏页面实现滚动。

实现的代码很简单,但是发现其中存在的问题就要靠长久的经验、读书阅历、以及程序员丰富的想象力。

先来看看,最后完成的两个效果图,以及console.log打印出来的内容:

1.点击页面2效果,以及打印的结果:

在点击之后,pagelist[this.index].rollCount计时器中打印一串的值为Math.ceil(rollData.num);5秒后自动执行另外一个计数器清除pagelist[this.index].rollCount计时器。

2.再次点击页面2,以及打印的结果:

在点击之后,会先判断pagelist[this.index].rollCount计时器是否存在,存在则清除;如果已经到达点击对应的页面完后会打印出不执行,并return

具体请看下边例子,具体各种情况已经做出详细说明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏翻页效果实现</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            color: #fff;
        }

        ul {
            list-style: none
        }

        #nav {
            position: fixed;
            top: 50px;
            left: 50px;
        }

        #nav li {
            width: 80px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 2px solid #fff;
            cursor: pointer;
        }

        #nav li:nth-child(1) {
            background: #f60;
        }

        #nav li:nth-child(2) {
            background: #63c;
        }

        #nav li:nth-child(3) {
            background: #3c6;
        }

        #nav li:nth-child(4) {
            background: #f9c;
        }

        #page {
            width: 100%;
            height: 100%;
        }

        #page li {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<ul id="page">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul id="nav">
    <li>页面1</li>
    <li>页面2</li>
    <li>页面3</li>
    <li>页面4</li>
</ul>
<script>
    function rollingPage() {
        var pageul = document.getElementById("page");
        var pagelist = pageul.children;

        var navul = document.getElementById("nav");
        var navlist = navul.children;

        for (i = 0; i < navlist.length; i++) {
            //得到全部样式getComputedStyle
            var bgcolor = getComputedStyle(navlist[i], "").backgroundColor;
//        alert(bgcolor);
            pagelist[i].style.background = bgcolor;

            //给当前的元素定义一个index对象,保存当前元素的下标
            navlist[i].index = i;

            //以对象声明变量
            var rollData = {
                num: 0,
                target: 0
            };
            navlist[i].onclick = function () {

                //被点击的按钮相对应的页面距离整个页面顶部的距离
                rollData.target = pagelist[this.index].offsetTop;

                //判断被点击的是否是当前的,是的话就不继续执行
                var h = window.innerHeight || document.documentElement.clientHeight
                    || document.body.clientHeight;
                var x = this.index;
                //判断当前点击的按钮对应的页面是否存在元素属性计时器
                if (pagelist[this.index].rollCount) {
                    console.log("存在");
                    clearInterval(pagelist[this.index].rollCount);

                    /*防止连续点击造成直接return致使页面没加载完,因此添加判断来遏制。
                     *这样即使页面没完全到达,哪怕上边清除后,
                       *也会继续向下执行计数器pagelist[this.index].rollCount
                     * */
                    /*但是发现事情终究不会很完美,需要不断地改进。
                     *在我和朋友聊天的一瞬间,再次点击了当前页面对应的按钮,
                       *却发现没有执行下边return.
                     *再看看计数器中打印的Math.ceil(rollData.num)的值为1。
                     *因此加上了Math.ceil(rollData.num) + 1 == h * x ||
                     *Math.ceil(rollData.num) - 1 == h * x
                     *
                     *之所以造成这样的原因还有就是,
                       *在 window.scrollTo(0, Math.ceil(rollData.num) + 1)
                     *以及减一和不加碱的后,保存的值为Math.ceil(rollData.num)未加碱。
                     * */
                    if (Math.ceil(rollData.num) + 1 == h * x ||
                             Math.ceil(rollData.num) - 1 == h * x ||
                                   Math.ceil(rollData.num) == h * x) {
                        console.log("不执行");
                        //如果存在并且滚动条滚动到的数值与当前页面的相等,
                          //则不向下执行计数器。
                        return;
                    }
                }

                //计时器进行页面滚动
                pagelist[this.index].rollCount = setInterval(function () {
                    //Math.ceil()向大于方向进行舍入
                    rollData.num = rollData.num +
                                     (rollData.target - rollData.num) / 10;
                    console.log(Math.ceil(rollData.num));
              //1.使滚动条到与h*x的位置, window.scrollTo()
             //2.判断被Math.ceil取值后的rollData.num属性在x*h前后值相差绝对值为1的情况
             //之所以进行上边的2操作,是因为在打印Math.ceil(rollData.num)值时发现有时
                 //会和x*h前后相差1
                    if (Math.ceil(rollData.num) + 1 == h * x) {
                        window.scrollTo(0, Math.ceil(rollData.num) + 1);
                    } else if (Math.ceil(rollData.num) - 1 == h * x) {
                        window.scrollTo(0, Math.ceil(rollData.num) - 1);
                    } else {
                        window.scrollTo(0, Math.ceil(rollData.num));
                    }
                }, 30);

                /*5秒后符合条件的情况下,可清除pagelist[x].rollCount计数器器
                 *阻止上边的计数器一直不停地运作
                 * */
                setTimeout(function () {
                    //五秒后,如果Math.ceil(rollData.num),以及前后相差1符合条件,
                        //就清除上边的计时器
                    if (Math.ceil(rollData.num) + 1 == h * x ||
                           Math.ceil(rollData.num) - 1 == h * x ||
                               Math.ceil(rollData.num) == h * x) {
                        console.log("自动清除" + x);
                        clearInterval(pagelist[x].rollCount);
                    }
                }, 5000);
            }
        }
    }

    addLoadEvent(rollingPage);
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }
</script>
</body>
</html>

在做完上边的优化之后,发现自己今后还是要多读书,多去开源网站看高手们写的代码,还要不断地发挥自己的想象力去完善自己的代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-10-08

js实现简单页面全屏

本文实例为大家分享了js实现简单页面全屏,供大家参考,具体内容如下 全屏效果为传入div元素全屏: 代码块 <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <div style="margin:0 auto;height:600px;width:700px;"> <butto

js控制页面的全屏展示和退出全屏显示的方法

本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <body>    <div style="margin:0 auto;heig

javascript full screen 全屏显示页面元素的方法

一种最简单的方式,就是动态改变你想要全屏显示的部件的style,例如position变成absolute,height和width都设置成窗口大小,并且把背景颜色改成全白(为了遮住页面上其余的元素).这样网页上就只能看到你要突出的部件了,视觉上就等同于全屏.同时利用javascript监听键盘事件,一旦用户按了ESc退出键,就恢复原来的样子.部分代码如下: 复制代码 代码如下: document.onkeydown = function (event) {        var e = even

js实现滚动条滚动到页面底部继续加载

这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的.但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得. 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据.关键是计算滚动条是否滚动到了浏览器底部,算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/:如果这个判断为true则表示滚动条滚动到了底部. 实例 <

js判断滚动条是否已到页面最底部或顶部实例

本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,下面就来给大家介绍这种效果实现原理与方法. 当可视区域小于页面的实际高度时,判定为出现滚动条,即: 复制代码 代码如下: if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll

js,jquery滚动/跳转页面到指定位置的实现思路

要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方: 第二个是在B页面内部点击某个元素,滚动到页面的任何地方: 怎么解决啊?很简单,当然是用锚点. 首先在A页面创建一个锚点 <body> <a href="b.html#pos" target="_blank">点击跳转</a> <body> 然后在B页面定义这个锚点 <body> ... 这里是很多文字,把页面撑开,撑出滚动条 ... <

js监听html页面的上下滚动事件方法

最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dome</title> <script type="text/javascript

JS实现判断滚动条滚到页面底部并执行事件的方法

需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个

js模拟F11页面全屏显示

本文实例为大家分享了js模拟F11页面全屏显示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试全屏</title> </head> <body> <button id='btn'>全屏按钮</button> <

当滚动条滚动到页面底部自动加载增加内容的js代码

1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

Vue下滚动到页面底部无限加载数据的示例代码

看到一篇Implementing an Infinite Scroll with Vue.js, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考. 从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充 本文技术要点 Vue生命周期 axios简单用法 moment.js格式化日期 图片懒加载 结合原生js来写scroll事件 请求节流 创建项目 首先创建一个简单的vue项目 #

js实现滑动到页面底部自动加载更多功能

话不多说,请看代码: //滚动条到页面底部加载更多案例 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var clientHeight = $(this).height(); //当前可视的页面高度 // console.log("top:"+scrollTop+"

滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷. 当然本例子采用的是jquery库,后期会做成原生js. 本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).h

jquery 页面滚动到底部自动加载插件集合

很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件. 2. jQuery Screw Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件. 3

jquery在启动页面时,自动加载数据的实例

其实,重要的就是这个方法: $(document).ready(function(){ } 具体的在jquery中: 具体的ajax怎么使用,可以查看我的上一篇博客<浅谈ajax在jquery中的请求和servlet中的响应> <script type="text/javascript"> $(document).ready(function(){ var str = ""; var strA = ""; $.ajax({

原生JS实现DOM加载完成马上执行JS代码的方法

用原生JS我们经常使用window.onload事件来加载页面.但是window.onload是在页面元素都加载完毕后才执行,如果页面内有大的图片的话,会在页面展现后好久时间后才执行.所以有时我们需要在DOM载入时马上执行一些函数.jQuery提供了document.ready方法用来代替window.onload.但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了. 如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了.Firefox有

jQuery实现滚动到底部时自动加载更多的方法示例

本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法.分享给大家供大家参考,具体如下: 这里利用AJAX,实现滚动到底加载数据功能: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/