个人博客、个人网站，看那些WordPress主题、Emlog主题、ZBlog主题、Typecho主题模板站，浏览器顶部有个进度条效果，显得非常的好看和与众不同，下面是实现页面顶部进度条效果代码分享。
HTML
- <!DOCTYPE>
- <html>
- <head>
- <title>全民博客</title>
- </head>
- <style type="text/css">
- #bar{position:fixed;left:0;top:0;z-index:10000;width:100%;height:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#f46}
- #bar::-webkit-progress-bar{background-color:transparent}
- #bar::-webkit-progress-value{background-color:#f46}
- #bar::-moz-progress-bar{background-color:#f46}
- </style>
- <body style="height:1000px;">
- <p style="display:flex;align-items:center;justify-content:center;height:98%;cursor:pointer;">鼠标滑轮往下滚动，网站顶部有一个进度条效果。</p>
- <script type="text/javascript">
- document.addEventListener('DOMContentLoaded', function () {
- var ght = window.innerHeight,
- doc = document.documentElement.scrollHeight,
- bar = document.querySelector('#bar');
- bar.max = doc - ght;
- bar.value = window.scrollY;
- document.addEventListener('scroll', function () {
- bar.max = document.documentElement.scrollHeight - window.innerHeight;
- bar.value = window.scrollY;
- });
- });
- </script>
- <progress id="bar" value="0"></progress>
- </body>
- </html>
你看，代码是不是超级简单。看到了，就拔下来，做个记录，以后需要用的话，就阔以直接使用啦。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）