久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

返回列表 發(fā)帖
查看: 1759|回復: 5

一款漂亮的 滾動條

12

主題

58

回帖

79

積分

漸入佳境

貢獻
0 點
金幣
5 個
樓主
發(fā)表于 2024-2-23 10:42:13 | 只看樓主 |只看大圖 |倒序瀏覽 |閱讀模式

1 路徑 找到 /template/你的模板/common/header.html   

  1. 在找到這段代碼 :
  2. <font color="#708090"><body id="nv_{$_G[basescript]}" class="pg_{CURMODULE}{if $_G['basescript'] === 'portal' && CURMODULE === 'list' && !empty($cat)} {$cat['bodycss']}{/if}" onkeydown="if(event.keyCode==27) return false;">
  3.         <div id="append_parent"></div><div id="ajaxwaitid"></div></font>
復制代碼
把下面代碼 添加到上<body> 之間 </body>
  1. <div id="progressbar"></div>
  2. <div id="scrollpath"></div>
復制代碼
2  路徑  找到 /template/你的模板/common/footer.html  

添加到里面 footer.html  里面

  1. <script type="text/javascript">
  2.         let progress=document.getElementById('progressbar');
  3.         let totalheight=document.body.scrollHeight - window.innerHeight;
  4.         window.onscroll=function(){
  5.                 let progressHeight=(window.pageYOffset / totalheight) *100;
  6.                 progress.style.height=progressHeight + "%";
  7.         }
  8. </script>
復制代碼
3 路徑 找到 /template/你的模板/common/common.css  

   添加到  common.css  最下面

  1. *{
  2.         -margin: 0;
  3.         -padding: 0;
  4.         -box-sizing: border-box;
  5.     font-family: "Droid Serif","Times New Roman","PingFang SC","Hiragino Sans GB","Source Han Sans CN","WenQuanYi Micro Hei","Microsoft Yahei",serif;
  6. }
  7. section{
  8.     -padding: 50px;
  9.     -background: #000;
  10.     -min-height: 100vh;
  11. }
  12. section h2{
  13.     font-size: 2.5em;
  14.     color: #fff;
  15. }
  16. section p{
  17.     font-size: 1.2em;
  18.     color: #fff;
  19. }
  20. ::-webkit-scrollbar{
  21.     width: 0;
  22. }
  23. #scrollpath{
  24.     position: fixed;
  25.     top: 0;
  26.     right: 0;
  27.     width: 10px;
  28.     height: 100%;
  29.     background: rgba(255,255,255,0.05);
  30. }
  31. #progressbar{
  32.     position: fixed;
  33.     top: 0;
  34.     right: 0;
  35.     width: 10px;
  36.     background: linear-gradient(to top,#008aff,#00ffe7);
  37.     animation: animate 5s linear infinite;
  38. }
  39. @keyframes animate{
  40.     0%,100%{
  41.         filter:hue-rotate(0deg);
  42.     }
  43.     50%{
  44.         filter:hue-rotate(360deg);
  45.     }
  46. }
  47. #progressbar:before{
  48.     content: '';
  49.     position: absolute;
  50.     top: 0;
  51.     left: 0;
  52.     width: 100%;
  53.     height: 100%;
  54.     background: linear-gradient(to top,#008aff,#00ffe7);
  55.     filter: blur(10px);
  56. }

  57. #progressbar:after{
  58.     content: '';
  59.     position: absolute;
  60.     top: 0;
  61.     left: 0;
  62.     width: 100%;
  63.     height: 100%;
  64.     background: linear-gradient(to top,#008aff,#00ffe7);
  65.     filter: blur(30px);
  66. }
復制代碼


演示地址: https://mp3.wf






回復

使用道具 舉報

5

主題

70

回帖

129

積分

漸入佳境

貢獻
8 點
金幣
6 個
沙發(fā)
發(fā)表于 2024-2-23 10:46:54 | 只看Ta
效果很炫酷,謝謝分享,不過不適合應用于我的網(wǎng)站
回復

使用道具 舉報

57

主題

462

回帖

583

積分

自成一派

貢獻
7 點
金幣
1 個
板凳
發(fā)表于 2024-2-23 13:52:14 | 只看Ta
很炫,很給力
回復

使用道具 舉報

TaC

104

主題

616

回帖

766

積分

自成一派

貢獻
5 點
金幣
3 個
地板
發(fā)表于 2024-11-18 14:51:36 | 只看Ta
你網(wǎng)站鼠標聲音怎么弄的,分享下
回復

使用道具 舉報

18

主題

139

回帖

193

積分

漸入佳境

貢獻
3 點
金幣
2 個
5#
發(fā)表于 2024-11-18 18:16:33 | 只看Ta
很漂亮收藏了
回復

使用道具 舉報

18

主題

139

回帖

193

積分

漸入佳境

貢獻
3 點
金幣
2 個
6#
發(fā)表于 2024-11-18 21:22:38 | 只看Ta
感覺首頁字體變歪了
回復

使用道具 舉報

您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規(guī)則

  • 關注公眾號
  • 有償服務微信
  • 有償服務QQ

手機版|小黑屋|Discuz! 官方交流社區(qū) ( 皖ICP備16010102號 |皖公網(wǎng)安備34010302002376號 )|網(wǎng)站地圖|star

GMT+8, 2025-7-2 21:03 , Processed in 0.064873 second(s), 13 queries , Redis On.

Powered by Discuz! W1.0 Licensed

Cpoyright © 2001-2025 Discuz! Team.

關燈 在本版發(fā)帖
有償服務QQ
有償服務微信
返回頂部
快速回復 返回頂部 返回列表