码实现的效果是一个随着页面滚动而动态更新的顶部进度条或图片旋转
一、随着页面滚动而动态更新的顶部进度条
<div id="percentageCounter"></div>
<style type="text/css">
/*顶部滚动条*/
#percentageCounter{
position:fixed;
left:0;
top:0;
height:3px;
z-index:99999;
background-image: linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
border-radius:5px;
background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
0% {
background-position: 0 0
}
100% {
background-position: -100% 0
}
}
</style>
<script type="text/javascript">
//原生js
// 监听滚动事件
window.addEventListener('scroll', function() {
// 获取滚动条垂直位置
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
// 获取文档总高度
var docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
// 获取视窗高度
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// 计算滚动百分比
var scrollPercent = (scrollTop / (docHeight - windowHeight)) * 100;
scrollPercent = scrollPercent.toFixed(1); // 保留一位小数
// 获取进度条元素并设置宽度
var progressBar = document.getElementById('percentageCounter');
if (progressBar) {
progressBar.style.width = scrollPercent + '%';
}
}).trigger("scroll"); // 注意：trigger 方法不是原生 JavaScript 的一部分，这里需要手动触发一次
// 由于 trigger("scroll") 不是原生 JavaScript 的部分，我们需要手动调用一次滚动事件处理函数
(function triggerScrollEvent() {
var scrollEvent = new Event('scroll', {
'bubbles': true,
'cancelable': true
});
window.dispatchEvent(scrollEvent);
})();
//jq顶部进度条加载显示
$(window).scroll(function() {
var a = $(window).scrollTop(),
c = $(document).height(),
b = $(window).height();
scrollPercent = a / (c - b) * 100;
scrollPercent = scrollPercent.toFixed(1);
$("#percentageCounter").css({
width: scrollPercent + "%"
});
}).trigger("scroll");
</script>
二、随着页面滚动而动态更新的悬浮图片旋转状态
<img id="rotatingImage" src="your-image-url.jpg" alt="Rotating Image" style="transition: transform 0.2s linear;">
<script type="text/javascript">
// 监听滚动事件
document.addEventListener('DOMContentLoaded', function() {
const image = document.getElementById('rotatingImage');
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercent = (scrollTop / scrollHeight) * 100; // 滚动百分比
const rotateDegrees = scrollPercent * 3.6; // 将百分比转换为度数（因为100%对应360度）
// 设置图片的transform属性以进行旋转
image.style.transform = `rotate(${rotateDegrees}deg)`;
});
});
</script>
