CSS能不能改變滾動條的背景圖

你可以將微軟的滾動條不讓顯示,而自己設計一個替代品出來。
利用圖片和js。
提供思路:
在顯示滾動條的地方顯示一個“滾動條底層圖片”,然後在“滾動條底層圖片”的上方顯示一個可以拖動的“滾動條圖片”,並且在拖動滾動條圖片時同時用js實現滾動頁面即可。具體的定位做準確,就可以了。

用dw的DragLayer製作一個隨意拖動的層結合iframe可以做成定製的滾動條,具體方法比較麻煩
首先下載http://darkvn.top263.net/swin/swindow.zip。(裏面包括要用到的swindow.js腳本文件和幾個示例文件。)然後準備好兩張圖,一張是整個窗口背景,一張是滾動條。最好是做成背景透明的gif格式圖片,這樣窗口就可以是不規則的形狀。要保證有以下幾個部分:1、iframe顯示區,矩形;2、滾動條區,矩形;3、控制按鈕:最小化、隱藏、向上滾動、向下滾動。
圖片準備好了以後,就可以打開Dw開始做了。
  Ctrl+N新建一個頁面,在菜單裏選擇Insert-Layer插入一個層,將它的名稱(layerId)改爲swin,並把他的高度和寬度都拉大一點,方便以後往裏面插入其他元素。在屬性面版裏設置它overflow屬性爲hidden,然後在層內插入前面準備好的背景圖。
  接下來的步驟很關鍵,也最容易出錯。所以請大家看仔細了。
  1.先將光標定位到層(swin)內,定位光標到層內的方法是:將鼠標移動到層的範圍內,當鼠標形狀變爲I(文字輸入)的時候,單擊鼠標左鍵。定位光標後,在dw菜單中選擇Insert-Layer,注意要從菜單中插入層,而不是通過object面版來插入。因爲這個層是用來放置iframe的,它的位置要跟隨主層背景一起移動。將這個層的名稱改爲framebox,並調整他的位置大小,使它正好覆蓋住背景圖的iframe顯示區域。
  2.再次將光標定位到層(swin) 內,用跟上面相同的方法再插入一層,這個層是用來控制滾動條的,把它的名稱改爲scrollbar,並調整好它的位置大小,使她正好蓋住背景圖的滾動條區。
  3.現在要將光標定位到剛插入的scrollbar層內,在這個層內再插入一層,方法跟上面一樣,把它的名稱改爲scrollbox,這個層就是滾動條了。選中這個層(scrollbox)在屬性面版中設置它的背景圖片(Bg Image)爲開始準備好的第二張滾動條圖片。並調整層的大小爲圖片的大小,並設置層的left,及top屬性都爲0;
可是現在的窗口還不能動,也沒有任何內容,因爲還沒有把javascript腳本和iframe加進來,把下載的swindow.js文件拷貝到網頁所在的目錄,然後將dw切換到原代碼編輯狀態,在<body>標記前加入以下代碼:
<script src="swindow.js"></script>
在代碼中找到這樣一行:
<div id="framebox" style="position:absolute; width:…… "></div>
這一行是用來定義iframe所在層的,在<div id="framebox" style="…">後加入以下代碼:
<iframe id=scrollfrm src="ttt.htm" frameborder=no scrolling=no width=100% height=100%></iframe>
其中ttt.htm是你自己要顯示的頁面。

 

---------------------------
用圖片
window.scrollBy(x,y)
來實現
 
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章