js 设置鼠标光标形状

auto(default) 默认值。浏览器根据当前情况自动确定鼠标光标类型。
col-resize 有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair 简单的十字线光标。
all-scroll 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
move 十字箭头光标。用于标示对象可被移动。
help 带有问号标记的箭头。用于标示有帮助信息存在。
no-drop 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
pointer(hand) 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
progress 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
vertical-text 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
wait 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
*-resize 用于标示对象可被改变尺寸方向的箭头光标。
w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js 光标设置</title>
</head>

<body>
<input type="button" value="auto" onclick=SetCursor("auto") /> 
<input type="button" value="col-resize" onclick=SetCursor("col-resize") /> 
<input type="button" value="row-resize" onclick=SetCursor("row-resize") /> 
<input type="button" value="all-scroll" onclick=SetCursor("all-scroll") /> 
<input type="button" value="crosshair" onclick=SetCursor("crosshair") /> 
<input type="button" value="move" onclick=SetCursor("move") /> 
<input type="button" value="help" onclick=SetCursor("help") /> 
<input type="button" value="no-drop" onclick=SetCursor("no-drop") /> 
<input type="button" value="not-allowed" onclick=SetCursor("not-allowed") />
<input type="button" value="pointer" onclick=SetCursor("pointer") /> 
<input type="button" value="progress" onclick=SetCursor("progress") /> 
<input type="button" value="text" onclick=SetCursor("text") /> 
<input type="button" value="vertical-text" onclick=SetCursor("vertical-text") /> 
<input type="button" value="wait" onclick=SetCursor("wait") /> 
<input type="button" value="w-resize" onclick=SetCursor("w-resize") /> 

<div id="test" style="width:600px; height:200px; margin: 0 auto; background-color: blue; color:#FFF;">移动鼠标到此查看效果</div>   


</body>

<script   language="Javascript">   
function SetCursor(str){   
  document.getElementById('test').style.cursor=str;
}   
</script>

</html>

效果演示

function SetCursor(str){
document.getElementById(‘test’).style.cursor=str;
}

移动鼠标到此查看效果

One thought on “js 设置鼠标光标形状

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s