天天看點

改變滑鼠指針形狀的css樣式執行個體

 改變<b>滑鼠指針</b>形狀的方法有兩種;改變滑鼠指針形狀的方法有兩種;一種:用css樣式表來改變滑鼠指針形狀。另一種是:利用第三方控件的方法,而我自己最常用的是第一種:用css樣式表來改變滑鼠指針形狀

        我們先來看第一種:用<b>css</b><b>樣式表</b>來改變<b>滑鼠指針</b>形狀。

有些時候我們并不需要文字,圖檔加連結,而且還想要加連結時的滑鼠樣式。這就用到了我們的<b>css</b><b>樣式表</b>來<b>滑鼠指針</b>形狀了。請下面的css滑鼠指針<b>css</b><b>樣式表</b>的一些屬性:

預設

default

文字/編輯

text

自動

auto

手形

pointer, hand(hand是IE專有)

可移動對象

move

不允許

not-allowed

無法釋放

no-drop

等待/沙漏

wait

幫助

help

十字準星

crosshair

向上改變大小(North)

n-resize

向下改變大小(South)

s_resize 與n-resize效果相同

向左改變大小(West)

w-resize

向右改變大小(East)

e-resize 與w-resize效果相同

向左上改變大小(NorthWest)

nw-resize

向左下改變大小(SouthWest)

sw-resize

向右上改變大小(NorthEast)

ne-resize 與sw-resize效果相同

向右下改變大小(SouthEast)

se-resize 與nw-resize效果相同

自定義光标

url('光标位址')

    以上就是改變<b>滑鼠指針</b>形狀的<b>css</b><b>樣式表</b>。如何應用呢?下面我們用執行個體來說明一下:

    &lt;style type="text/css"&gt;

   .a{ cursor:hand }   /*這裡邊的curusor的值可以是以上表中的任何值,或是你自己定義*/

    &lt;/style&gt;

&lt;div class=”a”&gt;歡迎您到百洋軟體研究實驗室listly的部落格來做客&lt;/div&gt;

也可以直接将樣式表寫在div标簽中效果是一樣的喲如:

&lt;div style=”cursor:help;”&gt;歡迎您到百洋軟體研究實驗室listly的部落格來做客&lt;/div&gt;

      還有一種用法其原理是:利用了CSS2的一個cursor的屬性cursor:url (url),滑鼠檔案可以使用jpg、gif、ani和cur多種檔案格式。需要注意的這種方式隻能在IE5.5以上浏覽器中正常顯示。

改變滑鼠指針形狀的第二種方法:利用第三方控件的方法

    這種方法非常簡單,隻需要講以下代碼加到網頁檔案的&lt;head&gt;&lt;/head&gt;之間:

    &lt;script language=javascript&gt;var Loaded=false;var Flag=false;&lt;/script&gt;

    &lt;script src='http://files.cometsystems.com/javascript/lc2000.js'

language=javascript&gt;&lt;/script&gt;

    &lt;script language=javascript&gt;if(Loaded&amp;&amp;Flag)TheCometCursor('cd_electric',0,626);&lt;/script&gt;

    修改後,浏覽此網頁的時候浏覽器會彈出一個“安全設定警告”,點選“是”,系統自動安裝控件,滑鼠就可以按照你的需要顯示了。

    那麼,如何才能選擇你所需要的滑鼠樣式呢?先登陸網站http://www.cometzone.com,這個網站有14個大類4000多種滑鼠,内容十分廣泛,滑鼠檔案制作也很精美,你可以根據需要從類别中選擇需要的滑鼠,點選相應的滑鼠圖檔就可以預覽到不同的效果。

    選中滑鼠後,點選網頁左邊導航的“GET CURSOR CODE”連結,轉到下一頁,再點選“Select Code”按鈕,按鈕下這個多行文本框裡面的内容就是我上面提供的代碼,隻是代碼中TheCometCursor('cd_electric',0,626)部分不同,顯示的滑鼠狀态也不同.

怎麼樣了解了,知道了如何改變滑鼠指針形狀的方法!當然有什麼不足不當之處請您及時指出,加以改正! 

參考閱讀:

CSS Hack浏覽器相容總結

 div+css網頁布局css hack浏覽器相容的決竅

div+css樣式表中display和visibility的執行個體分析

繼續閱讀