網頁高手-玩轉網頁捲軸

來源:互聯網
上載者:User
網頁

  網頁捲軸本身就是瀏覽器的一部分,使用它可以方便瀏覽較大的網頁,但是千篇一律的它經常會給整體頁面效果拖了不少後腿,我們能不能改變它灰灰的樣子呢?能!俗話說:“只有你想不到的,沒有做不到的。”

  給捲軸換色


  幾乎所有網頁的捲軸都是預設的灰色,如果把它的顏色換換,來點另類的,相信一定會使網頁更加靚麗。我們只要在網頁代碼<head> </head>之間插入下面的代碼,即可隨心所欲地更改顏色了。


<style>
body {SCROLLBAR-FACE-COLOR:#3333FF;(立體捲軸凸出部分的顏色)
SCROLLBAR-HIGHLIGHT-COLOR:#505050;(捲軸空白部分的顏色)
SCROLLBAR-SHADOW-COLOR:#fc2400;(立體捲軸陰影的顏色)
SCROLLBAR-ARROW-COLOR:#666666;(上下按鈕上三角箭頭的顏色)
SCROLLBAR-BASE-COLOR:#333333; (捲軸的基本顏色)
SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48} (立體捲軸強陰影的顏色)
</style>



  後面的16位顏色值你可以隨意更改,括弧內是解釋說明,在輸入時請不要插入。

  隱藏捲軸

  在任何情況下,如果網頁超出顯示範圍,就會出現捲軸。但有時我們並不想讓它顯示,如何隱藏它呢?只需在<body> </body>之間插入代碼:<body style="overflow-x:hidden;overflow-y:hidden">即可。其中x表示水平捲軸,將其改為y的話就可以隱藏垂直捲軸。

  滾屏顯示

  當網頁中有長篇文章時,瀏覽起來就比較吃勁了,想想一邊忙著拖動捲軸,一邊忙著瀏覽,確實挺累人的。為了客人能夠輕鬆的瀏覽,我們可以使用script代碼實現網頁的自動滾屏,當雙擊網頁的時候,網頁將會自動向下滾動,再次單擊時滾動停止。將下面的代碼插入到<body> </body>之間。



<script language"javascript">
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</script>



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。