1. 程式人生 > >CSS/HTML改變滑鼠指標形狀方法 屬性說明

CSS/HTML改變滑鼠指標形狀方法 屬性說明

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

        我們先來看第一種:用來改變滑鼠指標形狀。

有些時候我們並不需要文字,圖片加連結,而且還想要加連結時的滑鼠樣式。這就用到了我們的css樣式表滑鼠指標形狀了。請下面的css滑鼠指標css樣式表的一些屬性:
預設 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('游標地址')
     以上就是改變滑鼠指標形狀的css樣式表。如何應用呢?下面我們用例項來說明一下:
<style type="text/css">
   .a{ cursor:hand }   /*這裡邊的curusor的值可以是以上表中的任何值,或是你自己定義*/
</style> <div class=”a”>歡迎您到百洋軟體研究實驗室listly的部落格來做客</div> 也可以直接將樣式表寫在div標籤中效果是一樣的喲如: <div style=”cursor:help;”>歡迎您到百洋軟體研究實驗室listly的部落格來做客</div>
    還有一種用法其原理是:利用了CSS2的一個cursor的屬性cursor:url (url),滑鼠檔案可以使用jpg、gif、ani和cur多種檔案格式。需要注意的這種方式只能在IE5.5以上瀏覽器中正常顯示。 改變滑鼠指標形狀的第二種方法:利用第三方控制元件的方法
這種方法非常簡單,只需要講以下程式碼加到網頁檔案的<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>
修改後,瀏覽此網頁的時候瀏覽器會彈出一個“安全設定警告”,點選“是”,系統自動安裝控制元件,滑鼠就可以按照你的需要顯示了。
那麼,如何才能選擇你所需要的滑鼠樣式呢?先登陸網站http://www.cometzone.com
,這個網站有14個大類4000多種滑鼠,內容十分廣泛,滑鼠檔案製作也很精美,你可以根據需要從類別中選擇需要的滑鼠,點選相應的滑鼠圖片就可以預覽到不同的效果。
選中滑鼠後,點選網頁左邊導航的“GET CURSOR CODE”連結,轉到下一頁,再點選“Select Code”按鈕,按鈕下這個多行文字框裡面的內容就是我上面提供的程式碼,只是程式碼中TheCometCursor('cd_electric',0,626)部分不同,顯示的滑鼠狀態也不同.

相關推薦

CSS/HTML改變滑鼠指標形狀方法 屬性說明

改變滑鼠指標形狀的方法有兩種;第一種:用的來改變滑鼠指標形狀。另一種是:利用第三方控制元件的方法,而我自己最常用的是第一種:用css樣式表來改變滑鼠指標形狀         我們先來看第一種:用來改變滑鼠指標形狀。 有些時候我們並不需要文字,圖片加連結,而且還想要加連

CSS自定義滑鼠指標樣式

原文連結: http://davidwalsh.name/css-custom-cursorDemo地址: http://davidwalsh.name/demo/css-custom-cursor.php原文日期: 2014-09-16翻譯日期: 2014-09-17翻譯人

MFC改變滑鼠指標

Windows程式和Doc程式很大的不同 , 就在於Windows有一個亮麗的圖形介面和簡捷的操作方式 , 而滑鼠就是Windows程式中最重要的一個操作手段 .       有朋友向我諮詢如何修改滑鼠形狀 , 這本來是一個簡單的問題 ,但是當朋友向我詢問進一步的,更加深入

滑鼠移動到按鈕上時設定滑鼠指標形狀

變數: HCURSOR m_hButtonCursor; 過載函式: afx_msg BOOL OnSetCursor(CWnd* pWnd, UINT nHitTest, UINT msg); 函式實現: BOOL CMyDialog::OnSetCursor(CWnd*

C#軟體開發例項.私人訂製自己的螢幕截圖工具(十)在截圖中包含滑鼠指標形狀

本例項全部文章目錄在寫一此幫助說明類的文件時,擷取的圖片如果還有滑鼠的指標形狀,看起來就更直觀更友好一些。接下來就講一下如何在截圖中包含滑鼠指標形狀。新增結構CURSORINFO:[StructLayo

MFC改變滑鼠形狀方法彙總

MFC程式設計改變滑鼠形狀的方法彙總 1: 修改方法一  過載CView裡的OnMouseMove函式 .     過載方法 :         “View” -> “ClassWizard” (Ctrl + W) -> 右側Messages欄選擇”

HTML+CSS·經常使用的設計方法

鏈接樣式 wrapper 居中 marquee body right 塊元素 選擇 重置                 HTML+CSS·經常使用的設計方法: =======================================================

HTML embed標簽使用方法屬性詳解

利用 是否 parent als ase sig 默認 eve sel 一、基本語法 代碼如下: embed src=url 說明:embed可以用來插入各種多媒體,格式可以是 Midi、Wav、AIFF、AU、MP3等等,Netscape及新版的IE 都支持。url為

ajax傳值改變對應樣式(方法:定義屬性

改變 屬性 .com 圖片 ajax http inf 方法 傳值 ajax傳值改變對應樣式(方法:定義屬性)

html/css/js-如何利用jq來更改屬性的值和獲取屬性的值

lec tor 遇到 efi sha 小問題 width href name屬性 jquery的使用在web開發中是非常廣泛的,雖然說比較容易,易學,但在開發過程中,也總是會碰到各種各樣的小問題。 我曾經就遇到這種問題,jq如何獲取屬性值和更改屬性值的。 眾所周知,attr

html/css/js-個人容易忘的一些屬性

  1.當div裡面的文字超過給定div給定的寬度,div裡面的文字自動換行    word-break:break-all;會截斷改行最後的單詞            word-wrap:break-wo

CSS基礎 和 font字型、背景屬性連寫 與 清除浮動方法

1.偽類   1. :link   2. :visited   3. :hover(重要)   4. :active   5. :focus(input標籤獲取游標焦點) 2.偽元素   1.:first-letter   2.:before(重要在內部前面新增)   3.:after(重要 在內部後面新

QT 改變滑鼠形狀

改變滑鼠形狀,在繪製座標系的時候有用到,特此記下: 1 this->setMouseTracking(true); //設定為不按下滑鼠鍵觸發moveEvent 2 void mouseMoveEvent(QMouseEvent* event) 3 { 4 QPo

漂亮的滑鼠指標這樣設定···附【夢幻彩色指標獲取方法

1.在網上下載一個滑鼠指標包,解壓後在裡面找到*.inf格式的檔案, 2.右鍵選單點選安裝 3.點選確定安裝應用滑鼠主題包。 4.安裝過的指標包就存在電腦裡了,可以隨時進行切換。只需要在個性化裡就可以切換了。 個人非常喜歡推薦,夢幻彩色滑鼠指標資源獲取

使用Ajax方法實現分類註冊,並且通過attr()改變input標籤name的屬性

 form表單中姓名的id必須要設定,下面會需要用attr()改變name的值,以便傳到後臺對應不同的name欄位 <form method="post"id="myform" name="myform"> 姓名: <input type="tex

jqgrid 方法:setCell 改變單元格的值 &&改變單元格的值屬性

setCell rowid,colname, data, class, properties jqGrid物件 改變單元格的值。rowid:當前行id;colname:列名稱,也可以是列的位置索引,從0開始;data:改變單元格的內容,如果為空則不更 新;c

嵌入式Qt程式去掉小綠框及滑鼠指標方法

一、去掉螢幕中間的小綠框 去掉螢幕中間的小綠框終極方法是修改Qt原始碼,步驟如下: 1、修改原始碼 找到原始碼中的qwscursor_qws.cpp檔案,直接搜尋即可,程式碼修改如下: void QWSServerPrivate::initializeCursor() {

html + css + js 實現摺疊選單的方法

1. 套用模板,將選單的相關資訊直接放在指令碼資料中,使用迴圈生成 <script id="templateNavBar" type="text/html"> <div class="nav-bar-logo"> </div&

html+css瀏覽器相容問題及應對方法

相容:瀏覽器相容是前端程式碼書寫中常遇見的問題,隨瀏覽器更新,更多功能完善的新屬性未必能得到大範圍的支援,總結相容寫法或者樣式的方法又會因為時間推移而逐漸失效,這裡提供一些方法以作參考。 瀏覽器市場:程式碼功能用於服務物件,確定服務物件所使用的瀏覽器範圍,能幫助編寫者明確目標。 這裡是瀏

在嵌入式平臺上QT 在啟動後出現一個小綠方框,裡面有個滑鼠指標去掉的方法

不說廢話直接進入正題。 第一步:也是最費時的一步      首先進入要編譯的qt原始檔,我的路徑在work/imx6/qt-everywhere-opensource-src-4.8.5/src下面,讓我搜索qwscursor.cpp   &nbs