页面进度条和元素固定位置
一、页面进度条：当滚动条在页面中滚动时，页面上部会出现等比例的颜色填充效果。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>