カスタムマウスアイコン---cursor urlを使用する
1938 ワード
この間、プロジェクトでマウスアイコンをカスタマイズする必要がありました.一般的に私たちが使っているマウスのスタイルは固定されているものが多く、カスタムマウスのアイコンはあまりよく使われていないので、忘れないように、この小さな知識点をまとめました.
マウスアイコンのカスタマイズ
マウスアイコン、すなわちcss cursor urlの使用をカスタマイズします.
css cursor urlの使い方:
サンプルコード:
解析:前のurlはマウスアイコンをカスタマイズするパスで、相対/絶対パスです.2番目のパラメータはcss標準のcursorスタイルです.他のプロパティ(pointer/default/など)に変更できます.
注:w 3 schoolは、url定義のカーソルに代替オプションがないように、2番目のパラメータに通常のカーソルを定義することを推奨します.なお、IE下の2番目のパラメータは省略することができる.
マウスアイコンをカスタマイズするには、以下の点に注意してください.アイコンのフォーマットIEは アイコンのサイズマウスアイコンのサイズは32*32をお勧めします.そうしないと、サイズが一致しない問題が発生する可能性があります.
cursorプロパティ値を添付
値
説明
url
使用するカスタムカーソルのURLコメント:URLによって定義された使用可能なカーソルがないように、このリストの最後に通常のカーソルを指定してください.
default
既定のカーソル(通常は矢印)
auto
デフォルト.ブラウザ設定のカーソル
crosshair
カーソルに十字線を表示
pointer
カーソルはリンクされたポインタ(片手)だけで表示されます.
move
このカーソルはオブジェクトを移動できるだけです
e-resize
このカーソルは、行枠の端を右(東)に移動できることを示しています.
ne-resize
このカーソルは、行枠のエッジを上および右に移動できることを示します(北/東)
nw-resize
このカーソルは、長方形のボックスのエッジが上および左に移動できることを示します(北/西).
n-resize
このカーソルは、長方形のボックスのエッジが上(北)に移動できることを示します.
se-resize
このカーソルは、長方形の枠の縁が下または右に移動できることを示します(南/東).
sw-resize
このカーソルは、長方形のボックスのエッジが下または左に移動できることを示します(南/西).
s-resize
このカーソルは、長方形のボックスのエッジが下に移動できることを示します(北/西).
w-resize
このカーソルは、長方形のボックスのエッジが左に移動できることを示します(西).
text
このカーソルはテキストを示します
wait
このカーソルはプログラムが忙しいことを示しています(通常は時計や砂時計)
help
このカーソルは、使用可能なヘルプ(通常は疑問符または風船)を示します.
マウスアイコンのカスタマイズ
マウスアイコン、すなわちcss cursor urlの使用をカスタマイズします.
css cursor urlの使い方:
css:{cursor:url(" "),auot};
//IE,FF,chrome
サンプルコード:
解析:前のurlはマウスアイコンをカスタマイズするパスで、相対/絶対パスです.2番目のパラメータはcss標準のcursorスタイルです.他のプロパティ(pointer/default/など)に変更できます.
注:w 3 schoolは、url定義のカーソルに代替オプションがないように、2番目のパラメータに通常のカーソルを定義することを推奨します.なお、IE下の2番目のパラメータは省略することができる.
マウスアイコンをカスタマイズするには、以下の点に注意してください.
cur,ani,ico
の3つのフォーマットをサポートし、FFはbmp,gif,jpg,cur,ico
のいくつかのフォーマットをサポートし、ani
フォーマットもサポートしないし、gif
アニメーションフォーマットもサポートしないので、url参照のアイコンをico
またはcur
フォーマットに保存するのが一般的である.cursorプロパティ値を添付
値
説明
url
使用するカスタムカーソルのURLコメント:URLによって定義された使用可能なカーソルがないように、このリストの最後に通常のカーソルを指定してください.
default
既定のカーソル(通常は矢印)
auto
デフォルト.ブラウザ設定のカーソル
crosshair
カーソルに十字線を表示
pointer
カーソルはリンクされたポインタ(片手)だけで表示されます.
move
このカーソルはオブジェクトを移動できるだけです
e-resize
このカーソルは、行枠の端を右(東)に移動できることを示しています.
ne-resize
このカーソルは、行枠のエッジを上および右に移動できることを示します(北/東)
nw-resize
このカーソルは、長方形のボックスのエッジが上および左に移動できることを示します(北/西).
n-resize
このカーソルは、長方形のボックスのエッジが上(北)に移動できることを示します.
se-resize
このカーソルは、長方形の枠の縁が下または右に移動できることを示します(南/東).
sw-resize
このカーソルは、長方形のボックスのエッジが下または左に移動できることを示します(南/西).
s-resize
このカーソルは、長方形のボックスのエッジが下に移動できることを示します(北/西).
w-resize
このカーソルは、長方形のボックスのエッジが左に移動できることを示します(西).
text
このカーソルはテキストを示します
wait
このカーソルはプログラムが忙しいことを示しています(通常は時計や砂時計)
help
このカーソルは、使用可能なヘルプ(通常は疑問符または風船)を示します.