canwu 發表於 2024-2-23 10:42:13

一款漂亮的 滚动条

<img title="QQ截图20240223101315.png" id="aimg_28285" aid="28285" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202402/23/101341pnj547221g42g2pm.png" src="https://www.dismall.com/data/attachment/forum/202402/23/101341pnj547221g42g2pm.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="98" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /> <u><font color="#ff0000"> 1 路径 </font></u> 找到 /template/你的模板/common/header.html&nbsp; &nbsp; <br /><ol><li>在找到这段代码 :<br /><li>&lt;font color=&quot;#708090&quot;&gt;&lt;body id=&quot;nv_{$_G}&quot; class=&quot;pg_{CURMODULE}{if $_G['basescript'] === 'portal' &amp;&amp; CURMODULE === 'list' &amp;&amp; !empty($cat)} {$cat['bodycss']}{/if}&quot; onkeydown=&quot;if(event.keyCode==27) return false;&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div id=&quot;append_parent&quot;&gt;&lt;/div&gt;&lt;div id=&quot;ajaxwaitid&quot;&gt;&lt;/div&gt;&lt;/font&gt;</ol>把下面代码 添加到上<font color="#708090"><font style="background-color:rgb(247, 247, 247)">&lt;body</font></font><font color="#708090"><font style="background-color:rgb(247, 247, 247)">&gt; 之间 </font></font><font color="#708090"><font style="background-color:rgb(247, 247, 247)">&lt;/body</font></font><font color="#708090"><font style="background-color:rgb(247, 247, 247)">&gt;</font></font><br /><ol><li>&lt;div id=&quot;progressbar&quot;&gt;&lt;/div&gt;<br /><li>&lt;div id=&quot;scrollpath&quot;&gt;&lt;/div&gt;</ol><u><font color="#ff0000">2&nbsp;&nbsp;路径</font></u>&nbsp;&nbsp;找到 /template/你的模板/common/footer.html&nbsp;&nbsp;<br />添加到里面 footer.html&nbsp;&nbsp;里面<br /><ol><li>&lt;script type=&quot;text/javascript&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;let progress=document.getElementById('progressbar');<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;let totalheight=document.body.scrollHeight - window.innerHeight;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;window.onscroll=function(){<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; let progressHeight=(window.pageYOffset / totalheight) *100;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; progress.style.height=progressHeight + &quot;%&quot;;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;}<br /><li>&lt;/script&gt;</ol><u><font color="#ff0000">3 路径 </font></u> 找到 /template/你的模板/common/common.css&nbsp;&nbsp;<br />&nbsp; &nbsp;添加到&nbsp;&nbsp;common.css&nbsp;&nbsp;最下面<br /><ol><li>*{<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;-margin: 0;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;-padding: 0;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;-box-sizing: border-box;<br /><li>&nbsp; &nbsp; font-family: &quot;Droid Serif&quot;,&quot;Times New Roman&quot;,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Source Han Sans CN&quot;,&quot;WenQuanYi Micro Hei&quot;,&quot;Microsoft Yahei&quot;,serif;<br /><li>}<br /><li>section{<br /><li>&nbsp; &nbsp; -padding: 50px;<br /><li>&nbsp; &nbsp; -background: #000;<br /><li>&nbsp; &nbsp; -min-height: 100vh;<br /><li>}<br /><li>section h2{<br /><li>&nbsp; &nbsp; font-size: 2.5em;<br /><li>&nbsp; &nbsp; color: #fff;<br /><li>}<br /><li>section p{<br /><li>&nbsp; &nbsp; font-size: 1.2em;<br /><li>&nbsp; &nbsp; color: #fff;<br /><li>}<br /><li>::-webkit-scrollbar{<br /><li>&nbsp; &nbsp; width: 0;<br /><li>}<br /><li>#scrollpath{<br /><li>&nbsp; &nbsp; position: fixed;<br /><li>&nbsp; &nbsp; top: 0;<br /><li>&nbsp; &nbsp; right: 0;<br /><li>&nbsp; &nbsp; width: 10px;<br /><li>&nbsp; &nbsp; height: 100%;<br /><li>&nbsp; &nbsp; background: rgba(255,255,255,0.05);<br /><li>}<br /><li>#progressbar{<br /><li>&nbsp; &nbsp; position: fixed;<br /><li>&nbsp; &nbsp; top: 0;<br /><li>&nbsp; &nbsp; right: 0;<br /><li>&nbsp; &nbsp; width: 10px;<br /><li>&nbsp; &nbsp; background: linear-gradient(to top,#008aff,#00ffe7);<br /><li>&nbsp; &nbsp; animation: animate 5s linear infinite;<br /><li>}<br /><li>@keyframes animate{<br /><li>&nbsp; &nbsp; 0%,100%{<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;filter:hue-rotate(0deg);<br /><li>&nbsp; &nbsp; }<br /><li>&nbsp; &nbsp; 50%{<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;filter:hue-rotate(360deg);<br /><li>&nbsp; &nbsp; }<br /><li>}<br /><li>#progressbar:before{<br /><li>&nbsp; &nbsp; content: '';<br /><li>&nbsp; &nbsp; position: absolute;<br /><li>&nbsp; &nbsp; top: 0;<br /><li>&nbsp; &nbsp; left: 0;<br /><li>&nbsp; &nbsp; width: 100%;<br /><li>&nbsp; &nbsp; height: 100%;<br /><li>&nbsp; &nbsp; background: linear-gradient(to top,#008aff,#00ffe7);<br /><li>&nbsp; &nbsp; filter: blur(10px);<br /><li>}<br /><li><br /><li>#progressbar:after{<br /><li>&nbsp; &nbsp; content: '';<br /><li>&nbsp; &nbsp; position: absolute;<br /><li>&nbsp; &nbsp; top: 0;<br /><li>&nbsp; &nbsp; left: 0;<br /><li>&nbsp; &nbsp; width: 100%;<br /><li>&nbsp; &nbsp; height: 100%;<br /><li>&nbsp; &nbsp; background: linear-gradient(to top,#008aff,#00ffe7);<br /><li>&nbsp; &nbsp; filter: blur(30px);<br /><li>}</ol><br /><br />演示地址: https://mp3.wf<br /><br /><br /><br /><br /><br />路径<em>, </em>找到

hipass 發表於 2024-2-23 10:46:54

效果很炫酷,谢谢分享,不过不适合应用于我的网站

海哥 發表於 2024-2-23 13:52:14

很炫,很给力

TaC 發表於 2024-11-18 14:51:36

你网站鼠标声音怎么弄的,分享下

风吹故人香 發表於 2024-11-18 18:16:33

很漂亮收藏了

风吹故人香 發表於 2024-11-18 21:22:38

感觉首页字体变歪了
頁: [1]
查看完整版本: 一款漂亮的 滚动条