随滚动条变动的圆环滚动进度条，goTop按钮整合案例

效果展示：

html和js部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><div id="progress"><p class="pn"></p><div class="left"><div class="cir1"></div></div><div class="rig"><div class="cir2"></div></div><div class="wrap"><ul class="dots"><li></li><li></li><li></li></ul></div><div class="up"></div><div class="down"></div></div><div class="fill"></div><script>window.onload = function() {const progress = document.querySelector('#progress');const cir1 = document.querySelector('.cir1');const cir2 = document.querySelector('.cir2');const pn = document.querySelector('.pn');const dots = document.querySelector('.dots');const up = document.querySelector('.up');const down = document.querySelector('.down');function curProg(per) {console.log('per: ', per);if (per >= 0 && per <= 50) {cir1.style.transform = 'rotate(-135deg)';cir2.style.transform = `rotate(${-135 + 180 / 50 * per}deg)`;cir2.style.transition = `transform 0.05s`;} else if (per > 50 && per <= 100) {cir2.style.transform = 'rotate(45deg)';cir1.style.transform = `rotate(${-135 + 180 / 50 * (per - 50)}deg)`;cir1.style.transition = `transform 0.05s`;}}// console.log(document.documentElement.clientHeight, document.body.clientHeight);// 可滚动的总高度const th = document.body.clientHeight - document.documentElement.clientHeight;window.onscroll = function() {// console.log(document.documentElement.scrollTop);const st = document.documentElement.scrollTop;// console.log('st: ', st);const rp = Math.floor(st / th * 100);curProg(rp);if(rp === 0) {pn.classList.add('hide');dots.classList.remove('hide');} else {dots.classList.add('hide');pn.classList.remove('hide');(pn.innerHTML = rp + '%');}}progress.onclick = function() {if(dots.classList.contains('go')) {dots.classList.remove('go');dots.classList.add('back');up.classList.remove('go');up.classList.add('back');down.classList.remove('go');down.classList.add('back');} else {dots.classList.add('go');dots.classList.remove('back');up.classList.add('go');up.classList.remove('back');down.classList.add('go');down.classList.remove('back');}}up.onclick = function(e) {e.stopPropagation();document.documentElement.scrollTop = 0;}down.onclick = function(e) {e.stopPropagation();document.documentElement.scrollTop = th;}}</script>
</body>
</html>

css部分：

* {padding: 0;margin: 0;
}
ul, li {list-style-type: none;
}
.hide {display: none!important;
}
#progress {position: fixed;bottom: 40px;right: 40px;width: 54px;height: 54px;border-radius: 50%;display: flex;cursor: pointer;
}
.pn {position: absolute;z-index: 12;top: 0;left: 0;width: 100%;height: 100%;text-align: center;line-height: 54px;color: #ddd;pointer-events: none;
}
.left, .rig {position: relative;width: 50%;height: 100%;overflow: hidden;
}
.cir1, .cir2 {position: absolute;top: 0;width: 50px;height: 50px;border-radius: 50%;border: 2px solid #fff;
}
.cir1 {left: 0;border-left: 2px solid #708a97;border-bottom: 2px solid #708a97;transform: rotate(-135deg);
}
.cir2 {right: 0;border-top: 2px solid #708a97;border-right: 2px solid #708a97;transform: rotate(-135deg);
}
.fill {height: 3200px;
}
.wrap {position: absolute;z-index: 10;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 48px;height: 48px;border-radius: 50%;background-color: #708a97;display: flex;justify-content: center;align-items: center;
}
@keyframes ro-go {0% {}90% {transform: rotate(-100deg);}100% {transform: rotate(-90deg);}
}
@keyframes ro-back {0% {transform: rotate(-90deg);}90% {transform: rotate(10deg);}100% {transform: rotate(0deg);}
}
.dots {width: 8px;height: 26px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}
.dots.go {animation: ro-go 0.4s forwards;
}
.dots.back {animation: ro-back 0.4s forwards;
}
.dots li {width: 6px;height: 6px;border-radius: 50%;background-color: #fff;
}
.up, .down {position: absolute;width: 30px;height: 30px;border-radius: 50%;background-color: rgba(0, 0, 0, .7);color: #fff;opacity: 0;
}
.up::before, .down::before {content: "";position: absolute;left: 8px;width: 12px;height: 12px;border: 2px solid #fff;
}
.up::before {top: 11px;border-right: none;border-bottom: none;transform: rotate(45deg);
}
.down::before {top: 5px;border-left: none;border-top: none;transform: rotate(45deg);
}
@keyframes up-go {0% {}90% {top: -65px; opacity: .9;}100% {top: -60px; opacity: 1;}
}
@keyframes up-back {0% {top: -60px; opacity: 1;}100% {top: 0px; opacity: 0;}
}
.up {top: 0;right: 0;
}
.up.go {animation: up-go 0.4s forwards;
}
.up.back {animation: up-back 0.4s forwards;
}
@keyframes down-go {0% {}90% {left: -65px; opacity: .9;}100% {left: -60px; opacity: 1;}
}
@keyframes down-back {0% {left: -60px; opacity: 1;}100% {left: 0px; opacity: 0;}
}
.down {bottom: 0;left: 0;
}
.down.go {animation: down-go 0.4s forwards;
}.down.back {animation: down-back 0.4s forwards;
}

随滚动条变动的圆环滚动进度条，goTop按钮整合案例相关推荐

java如何画百分比圆环_canvas绘制旋转的圆环百分比进度条
作者:依然 | 时间:2015-05-29 | 阅读:122 canvas绘制旋转的圆环百分比进度条从上一篇的文章使用HTML5 Canvas arc()绘制圆形/圆环我们了解到了怎么使用ca ...
uni-app中自定义图表（canvas实现chart图表）开发篇（1）-圆环带进度条
经常开发中,会遇到各种各样图表,这时大家普遍会想到去找插件.uniapp中常用的有uchart.js和echart.js,这对图表要求不高的项目来说,是很便捷的.但有时会遇到一些定制图表,加上UI的美 ...
MFC创建处理中进度条，循环滚动进度条的方法
创建一个不显示实际进度的循环滚动进度条,类似于Windows XP启动界面的进度条新建一个MFC项目TestProgress,编辑界面,添加一个进度条,两个按钮,实现点击start进度条循环滚动,点 ...
Vue实战--动态圆环百分比进度条
最近在开发小程序的时候,碰到一个实现圆环百分比进度条的需求,类似如下设计图: 小白的我感觉实现起来有难度,于是上百度看看别人是怎么做的,结果没找到一个满意的,要不是静态的实现,就是需要用到比较多的 ...
项目看板开发经验分享(二)——事业部能源监控看板（进度条拟柱状图图表、圆柱形柱状图、图表左右滚动进度条、导航轮播按钮）
系列第二篇,话不多说,直接进入正题事业部能源监控看板展示视频 1.进度条组件因为整个看板有四处地方用到,结合上一期提到的内容,我们优先考虑将这个模块做成组件 UED给的样式用echarts会很麻烦 ...
MFC基于Progress动态滚动进度条
1. 在对话框上新建一个滚动条控件IDC_PROGRESS1 2. 关联一个control类型的变量m_progress 具体步骤:右击进度条,添加变量常用方法: **SetRange方法用来设置进 ...
CSS使用线性渐变实现滚动进度条
效果查看:https://codepen.io/Chokcoco/pen/KbBXQM?editors=1100 CSS: body {position: relative;padding: 50px ...
bootstrap 滚动进度条_bootstrap实现动态进度条效果
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单保存中:{{length}}% PS: ...
bootstrap 滚动进度条_bootstrap动态进度条怎么搞
在本教程中,您将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前 ...
SET/JFace ProgressIndicator的使用以及来回滚动进度条实际使用示例
关于进度条的意义,不多说了,之前了解过SWT的ProgressBar,网上教程很多,自己测试也没问题,但是当我尝试将这个东西应用到实际项目中时,才发现真的好难,因为实际的项目中,长时间处理的东西都在主 ...

随滚动条变动的圆环滚动进度条，goTop按钮整合案例

随滚动条变动的圆环滚动进度条，goTop按钮整合案例相关推荐

最新文章

热门文章