极客教程如何使用jQuery改变光标样式
光标样式用于指定指向一个元素时要显示的鼠标光标。
Cursor 值:
- alias：该属性用于显示光标的指示，是要创建的东西。
- all-scroll:在这个属性中，光标表示滚动。
- auto。这是浏览器设置光标的默认属性。
- cell。在这个属性中，光标表示一个或一组单元格被选中。
- context-menu。在这个属性中，光标表示有一个上下文菜单可用。
- col-resize。在这个属性中，光标表示该列可以被水平调整大小。
- copy。在这个属性中，光标表示有东西要被复制。
- crosshair:在这个属性中，光标被渲染成一个十字线。
- default。默认的游标。
- e-resize。在这个属性中，光标表示方框的一个边缘要向右移动。
- ew-resize。在这个属性中，光标表示双向调整大小的光标。
- help。在这个属性中，光标表示有帮助。
- move。在这个属性中，光标表示有东西要被移动
- n-resize。在这个属性中，光标表示方框的一个边缘要向上移动。
- ne-resize。在这个属性中，光标表示一个盒子的一个边缘要向上和向右移动。
- nesw-resize。该属性表示双向调整光标大小。
- ns-resize。该属性表示双向调整光标大小。
- nw-resize。在这个属性中，光标表示方框的一个边缘要向上和向左移动。
- nwse-resize。该属性表示双向调整光标大小。
- no-drop。在这个属性中，光标表示被拖动的项目不能在此放下。
- none。该属性表示没有为该元素渲染光标。
- not-allowed:在这个属性中，游标表示所请求的动作将不会被执行。
- pointer。在这个属性中，光标是一个指针，表示链接
- progress。在这个属性中，光标表示程序正在忙碌。
- row-resize。在这个属性中，光标表示该行可以被垂直调整大小。
- s-resize。在这个属性中，光标表示一个盒子的一个边缘要向下移动。
- se-resize。在这个属性中，光标表示方框的一个边缘要向下和向右移动。
- sw-resize。在这个属性中，光标表示一个盒子的一个边缘要向下和向左移动。
- text。在这个属性中，光标表示可能被选中的文本。
- URL。在这个属性中，一个以逗号分隔的自定义游标的URL列表，以及列表末尾的一个通用游标。
- vertical-text:在这个属性中，光标表示可能被选中的垂直文本。
- w-resize。在这个属性中，光标表示方框的一个边缘要向左移动。
- wait：在这个属性中，光标表示程序正在忙碌。
- zoom-in。在这个属性中，光标表示某些东西可以被放大。
- zoom-out: 在这个属性中，光标表示某些东西可以被放大。
- initial。此属性用于设置为其默认值。
- inherit: 继承其父元素。
语法:
$(selector).style.cursor = ”cursor_property_value”;
示例s:
// Change the cursor on complete document
(document).style.cursor = "alias";
// Change the cursor on particular element("p").style.cursor = "alias";
// Change the cursor on particular element using class
(".curs").style.cursor = "wait";
// Change the cursor on particular element using id("#curs").style.cursor = "crosshair";
实现：这个例子使用jQuery css()函数来显示不同的光标样式。
<!DOCTYPE html>
<html>
<head>
<title>
How to change cursor style using jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
(document).ready(function() {
("input[type='radio']").click(function() {
var radioValue = ("input[name='cursor']:checked").val();
if(radioValue) {
("#block").css("cursor", radioValue );
}});
});
</script>
</head>
<body>
<h1 align="center">
Changing cursor style using jQuery
</h1>
<div style="border:2px solid green">
<table width="100%" style="table-layout:fixed;">
<p align="center">
Click on the Radio button to
change the cursor style
</p>
<tr>
<td>
<input type="radio" name="cursor" value="alias" >
alias
</td>
<td>
<input type="radio" name="cursor" value="all-scroll" >
all-scroll
</td>
<td>
<input type="radio" name="cursor" value="auto" >
auto
</td>
<td>
<input type="radio" name="cursor" value="cell" >
cell
</td>
</tr>
<tr>
<td>
<input type="radio" name="cursor" value="context-menu" >
context-menu
</td>
<td>
<input type="radio" name="cursor" value="col-resize" >
col-resize
</td>
<td>
<input type="radio" name="cursor" value="copy" >
copy
</td>
<td>
<input type="radio" name="cursor" value="crosshair" >
crosshair
</td>
</tr>
<tr>
<td>
<input type="radio" name="cursor" value="default" >
default
</td>
<td>
<input type="radio" name="cursor" value="e-resize" >
e-resize
</td>
<td>
<input type="radio" name="cursor" value="ew-resize" >
ew-resize
</td>
<td>
<input type="radio" name="cursor" value="help" >
help
</td>
</tr>
<tr>
<td>
<input type="radio" name="cursor" value="move" >
move
</td>
<td>
<input type="radio" name="cursor" value="n-resize" >
n-resize
</td>
<td>
<input type="radio" name="cursor" value="ne-resize" >
ne-resize
</td>
<td>
<input type="radio" name="cursor" value="nw-resize" >
nw-resize
</td>
</tr>
<tr>
<td>
<input type="radio" name="cursor" value="ns-resize" >
ns-resize
</td>
<td>
<input type="radio" name="cursor" value="no-drop" >
no-drop
</td>
<td>
<input type="radio" name="cursor" value="none" >
none
</td>
<td>
<input type="radio" name="cursor" value="not-allowed" >
not-allowed
</td>
</tr>
<tr>
<td>
<input type="radio" name="cursor" value="pointer" >
pointer
</td>
<td>
<input type="radio" name="cursor" value="progress" >
progress
</td>
<td>
<input type="radio" name="cursor" value="row-resize" >
row-resize
</td>
<td>
<input type="radio" name="cursor" value="s-resize" >
s-resize
</td>
</tr>
<tr>
<td>
<input type="radio" name="cursor" value="se-resize" >
se-resize
</td>
<td>
<input type="radio" name="cursor" value="sw-resize" >
sw-resize
</td>
<td>
<input type="radio" name="cursor" value="text" >
text
</td>
<td>
<input type="radio" name="cursor" value="vertical-text" >
vertical-text
</td>
</tr>
<tr>
<td>
<input type="radio" name="cursor" value="w-resize" >
w-resize
</td>
<td>
<input type="radio" name="cursor" value="wait" >
wait
</td>
<td>
<input type="radio" name="cursor" value="zoom-in" >
zoom-in
</td>
<td>
<input type="radio" name="cursor" value="zoom-out" >
zoom-out
</td>
</tr>
</table>
</div>
<section>
<label>
<h1>Output:</h1>
</label>
<div id="block" style="padding:10px;border:2px solid red;">
Hello welcome
</div>
</section>
</body>
</html>
输出:
