溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html如何改變鼠標(biāo)形狀

發(fā)布時(shí)間:2021-04-13 14:43:42 來源:億速云 閱讀:1143 作者:小新 欄目:web開發(fā)

這篇文章主要介紹了html如何改變鼠標(biāo)形狀,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

html改變鼠標(biāo)形狀的方法:1、用css的cursor屬性來改變鼠標(biāo)指針形狀,代碼如“.a{ cursor:hand }”;2、利用第三方控件來改變鼠標(biāo)指針形狀。

CSS/HTML 改變鼠標(biāo)指針形狀

改變鼠標(biāo)指針形狀的方法有兩種;第一種:用css cursor屬性來改變鼠標(biāo)指針形狀。另一種是:利用第三方控件的方法,而我自己最常用的是第一種:用css樣式表來改變鼠標(biāo)指針形狀

我們先來看第一種:用cursor屬性來改變鼠標(biāo)指針形狀。

有些時(shí)候我們并不需要文字,圖片加鏈接,而且還想要加鏈接時(shí)的鼠標(biāo)樣式。這就用到了我們的css樣式表鼠標(biāo)指針形狀了。請下面的css鼠標(biāo)指針css樣式表的一些屬性:

默認(rèn)

default

文字/編輯

text

自動

auto

手形

pointer, hand(hand是IE專有)

可移動對象

move

不允許

not-allowed

無法釋放

no-drop

等待/沙漏

wait

幫助

help

十字準(zhǔn)星

crosshair

向上改變大小(North)

n-resize

向下改變大小(South)

s_resize 與n-resize效果相同

向左改變大小(West)

w-resize

向右改變大小(East)

e-resize 與w-resize效果相同

向左上改變大?。∟orthWest)

nw-resize

向左下改變大?。⊿outhWest)

sw-resize

向右上改變大?。∟orthEast)

ne-resize 與sw-resize效果相同

向右下改變大?。⊿outhEast)

se-resize 與nw-resize效果相同

自定義光標(biāo)

url('光標(biāo)地址')

以上就是改變鼠標(biāo)指針形狀的css樣式表。如何應(yīng)用呢?下面我們用實(shí)例來說明一下:

<style type="text/css">   
.a{ cursor:hand }   /*這里邊的curusor的值可以是以上表中的任何值,或是你自己定義*/</style>
<p class=”a”>歡迎您到XXX來做客</p>

也可以直接將樣式表寫在p標(biāo)簽中效果是一樣的喲如:

<p style=”cursor:help;”>歡迎您到XXX來做客</p>

還有一種用法其原理是:利用了CSS2的一個(gè)cursor的屬性cursor:url (url),鼠標(biāo)文件可以使用jpg、gif、ani和cur多種文件格式。需要注意的這種方式只能在IE5.5以上瀏覽器中正常顯示。

改變鼠標(biāo)指針形狀的第二種方法:利用第三方控件的方法

這種方法非常簡單,只需要講以下代碼加到網(wǎng)頁文件的<head></head>之間:

<script language=>var Loaded=false;var Flag=false;</script>
<script src='http://files.cometsystems.com//lc2000.js'
language=></script>
<script language=>if(Loaded&&Flag)TheCometCursor('cd_electric',0,626);</script>

修改后,瀏覽此網(wǎng)頁的時(shí)候?yàn)g覽器會彈出一個(gè)“安全設(shè)置警告”,點(diǎn)擊“是”,系統(tǒng)自動安裝控件,鼠標(biāo)就可以按照你的需要顯示了。
那么,如何才能選擇你所需要的鼠標(biāo)樣式呢?先登陸網(wǎng)站http://www.cometzone.com,這個(gè)網(wǎng)站有14個(gè)大類4000多種鼠標(biāo),內(nèi)容十分廣泛,鼠標(biāo)文件制作也很精美,你可以根據(jù)需要從類別中選擇需要的鼠標(biāo),點(diǎn)擊相應(yīng)的鼠標(biāo)圖片就可以預(yù)覽到不同的效果。
選中鼠標(biāo)后,點(diǎn)擊網(wǎng)頁左邊導(dǎo)航的“GET CURSOR CODE”鏈接,轉(zhuǎn)到下一頁,再點(diǎn)擊“Select Code”按鈕,按鈕下這個(gè)多行文本框里面的內(nèi)容就是我上面提供的代碼,只是代碼中TheCometCursor('cd_electric',0,626)部分不同,顯示的鼠標(biāo)狀態(tài)也不同.

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“html如何改變鼠標(biāo)形狀”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI