当页面滑动到必定位置,元素固定位置、页面进度条以及翻屏效果

2022年05月10日 阅读数:12
这篇文章主要向大家介绍当页面滑动到必定位置,元素固定位置、页面进度条以及翻屏效果,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

页面进度条和元素固定位置

一、页面进度条:当滚动条在页面中滚动时,页面上部会出现等比例的颜色填充效果。javascript

 <div class="progress"> </div> //制做进度条
 <div style="height: 500px;"></div> 
 <div class="demo"></div>//须要固定位置的页面元素
 <div class="item"></div>
 *{
   
   
    margin: 0;
    padding: 0;
}
 .progress{
   
   
        width: 0px;
        height: 10px;
        background-color: red;
        border-radius: 5px;
        position: fixed;  /*固定定位*/
        top: 0;
        left: 0;
        z-index: 1; 
}
.item{
   
   
      height: 2000px;
}
.demo{
   
   /*给须要滑动到必定位置,固定的元素添加样式*/
       height: 100px;
       width: 100%;
       background-color: palegreen;
       top: 0;
       /* 当没有定位是top和left没有做用 */
}
 <script>
        let demo=document.querySelector('.demo')
        let topp=demo.offsetTop //有色框距离body上边框的距离
        window.onscroll=function(){
   
   //页面滚动条事件
        let scroll=Math.floor(document.documentElement.scrollTop) //滚动条距离顶部的距离
        let maxScr=document.body.offsetHeight-window.innerHeight  //滚动条可以达到的最大长度(即body的高度减去页面的高度)innerHeight:返回页面可见区的高度。
        let percent=(scroll*100/maxScr)+'%'  //比例关系
            document.querySelector('.progress').style.width=percent

       if(scroll>topp){
   
   //当滚动条距离顶部的距离大于了有色框距离body上边框的距离,就让页面固定。
                demo.style.position='fixed'
       }else{
   
   
                demo.style.position='static' //static为定位的默认值
            }
        }
</script>

二、音频播放的进度条制做
首先定义一些方法:css

let _ = {
   
     //_做为对象名
    repairZero(num) {
   
   //判断数字是否存在第二位,若存在则直接输出,若不存在则加‘0’输出
        num = num.toString()
        return num[1] ? num : ('0' + num)
    },
    makeStr() {
   
   //call()改变指向,arguments是将传过来的参数变成一个类数组,可是没法使用数组的方法。
        let code = Array.prototype.shift.call(arguments) //call将数组方法中的shift方法指向了括号中的参数,使得参数能够借用数组的方法
        return Array.prototype.join.call(arguments, code)
    },
    convertSec2Str(total) {
   
   //制做相似于00:00这样的时间格式
        let min = _.repairZero(Math.floor(total / 60))
        let sec = _.repairZero(Math.floor(total % 60))
        return _.makeStr(':', min, sec)
    }
}

接下来页面布局:(按钮的制做以及音频进度条)java

  <audio id="player" src="./mp3/demo.mp3"></audio>//音频
    <div class="play">播放</div>//播放按钮
    <div class="container">
        <div class="progress"></div>//进度条
    </div>
    <div class="time"></div> //时间显示
 <style>
        * {
   
   
            margin: 0;
            padding: 0;
        }

        .container {
   
   
            height: 10px;
            width: 500px;
            background-color: #ccc;
            border-radius: 5px;
            overflow: hidden;
            margin-top: 50px;
        }

        .progress {
   
   
            height: 100%;
            width: 0%;
            background-color: orangered;
        }

        .play {
   
   
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            background-color: palegreen;
            box-shadow: 4px 4px 5px #333;
        }
    </style>

对页面元素进行控制:web

 <script>
        function $(selector) {
   
   
            return document.querySelector(selector)
        }
        //获取页面元素
        let progress = $('.progress')
        let container = $('.container')
        let player = $('#player')
        let time = $('.time')

        player.oncanplay = function () {
   
   //视频先加载,对时间进行初始化
            time.innerHTML = `00:00/${
     
      _.convertSec2Str(player.duration)}`
            }
        $('.play').onclick = function () {
   
   
            if (this.innerHTML === '播放') {
   
   
                player.play()//若是播放按钮内容是‘播放’,点击后视频开始播放并将内容换成'暂停'
                this.innerHTML = '暂停'
            } else {
   
   
                player.pause()//音频中止函数
                this.innerHTML = '播放'
            }
        }


        let timer = setInterval(function () {
   
   //使用定时器
            let i = (player.currentTime / player.duration) * 100;//player.currentTime是音频播放时的秒数;player.duration:视频的总秒数
            let a = _.convertSec2Str(player.currentTime) + '/' + _.convertSec2Str(player.duration)//将获取到的时间制做成00:00/00:00这样的字符串,以显示已播放时长/总时长
            time.innerHTML = a
            if (i == 100) {
   
   //当音频播放结束,音频暂停并重置,按钮内容为播放
                i = 0
                player.pause()
                $('.play').innerHTML = '播放'
            }
            progress.style.width = i + '%'//进度条的百分比

        }, 1000)
    </script>

三、使用鼠标进行翻屏(当鼠标滑动一下,变换整个可见区域页面)
页面布局:(包含5个子div,并对里面的每一个div设置样式)数组

  <div class="container">
        <div style="background-color: palegreen;"></div>
        <div style="background-color: palevioletred;"></div>
        <div style="background-color: peru;"></div>
        <div style="background-color: royalblue;"></div>
        <div style="background-color: seagreen;"></div>
    </div>
 <style>
        *{
   
   
            margin: 0;
            padding: 0;
        }
        body{
   
   
            height: 100vh;//高度为满屏
            overflow: hidden;//超出部分(滚动条)隐藏
        }
        .container{
   
   
            transform: translateY(0vh);
            transition: all 0.5s linear;//过渡效果
        }
        .container div{
   
   
             height: 100vh;//每个子div高度均为满屏
        }
    </style>
 <script>
        let i=0;
        let container=document.querySelector('.container')
        let endtime=new Date()  //节流(屡次触发只会算一次)
        window.onmousewheel=function(e){
   
   //鼠标滑动事件
            if(new Date()-endtime<500) return;//当上一次滑动时间与第二次之间小于500ms时,则页面不滚动(屡次操做无用)
            if(e.wheelDeltaY<0){
   
     //鼠标滑动页面的距离,若向下距离为负值,不然为正值(用来判断鼠标滑动的方向)
               if(i===4) return; //默认在第一个div上,因此最多向下滑动div个数减一
               i++
            }else{
   
   
                if(i==0) return
                i--
            }
            container.style.transform=`translateY(-${
     
     i*100}vh)`
            endtime=new Date()
        }
    </script>