编程开发子分类JS特效代码分类鼠标特效相关信息
?相关鼠标特效文章推荐
热门鼠标特效文章推荐
广告赞助商
鼠标特效文章阅读排
各种鼠标指针形状大全_鼠标特效_js网页特效代码
作者:吾吾织梦
摘要:htmlheadtitle吾吾织梦网页特效 - 各种鼠标指针形状大全/titlemeta http-equiv="Content-Type" content="text/ charset=gb2312"/headbody brbrcenterfont color=red face="隶书" size=6各种形状的鼠标/font/centerbrbrcentertable border=1 bordercolor=
&title&吾吾织梦网页特效 - 各种鼠标指针形状大全&/title&
&meta http-equiv="Content-Type" content="text/ charset=gb2312"&
&center&&font color=red face="隶书" size=6&各种形状的鼠标&/font&&/center&
&br&&center&
&table border=1 bordercolor=#000000 borderlight=green style="border-collapse: collapse" cellpadding="0" cellspacing="0"&
&tr&&td align=center&&font size=5 color=red face="华文中宋"&&strong&
下页为效果显示区!&/strong&&/font&&/td&&/tr&&tr&&td width=400 height=150&
&table width="100%" border="0" height="200"&
&td width="51%" height="21"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:hand"&style="cursor:hand"&/a&&/b&&/font&&/div&
&td width="49%" valign="top" height="21"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:crosshair"&style="cursor:crosshair"&/a&&/b&&/font&&/div&
&td width="51%" height="25" valign="top"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:text"&style="cursor:text"&/a&&/b&&/font&&/div&
&td width="49%" valign="top" height="25"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:wait"&style="cursor:wait"&/a&&/b&&/font&&/div&
&td width="51%" height="25" valign="top"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:move"&style="cursor:move"&/a&&/b&&/font&&/div&
&td width="49%" valign="top" height="25"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:help"&style="cursor:help"&/a&&/b&&/font&&/div&
&td width="51%" height="25" valign="top"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:e-resize"&style="cursor:e-resize"&/a&&/b&&/font&&/div&
&td width="49%" valign="top" height="25"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:n-resize"&style="cursor:n-resize"&/a&&/b&&/font&&/div&
&td width="51%" height="25" valign="top"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:nw-resize"&style="cursor:nw-resize"&/a&&/b&&/font&&/div&
&td width="49%" valign="top" height="25"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:w-resize"&style="cursor:w-resize"&/a&&/b&&/font&&/div&
&td width="51%" height="25" valign="top"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:s-resize"&style="cursor:s-resize"&/a&&/b&&/font&&/div&
&td width="49%" valign="top" height="25"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:se-resize"&style="cursor:se-resize"&/a&&/b&&/font&&/div&
&td width="51%" height="26" valign="top"&
&div align="left"&&font face="Arial, Helvetica, sans-serif" size="2"&&b&&a href="cursor.htm" style="cursor:sw-resize"&style="cursor:sw-resize"&/a&&/b&&/font&&/div&
&td width="49%" valign="top" height="26"&
&div align="left"&&/div&
&/table&&/td&&/tr&
&/table&&/center&
&SCRIPT LANGUAGE="JavaScript"&&/font&
&font face=Verdana&&!-- hide&/font&
&font face=Verdana&function goHist(a) &/font&
&font face=Verdana&{&/font&
&font face=Verdana&
history.go(a);&/font&
&font face=Verdana&}&/font&
&font face=Verdana&//--&&/font&
&font face=Verdana&&/script&&/center&
&/html&&/font&
&a href="/HTML/jsrun/"&欢迎访问吾吾织梦网页脚本特效集&/a&
运行代码复制代码另存代码收藏本页
友情提示.可编辑后运行
(责任编辑：吾吾织梦)
------分隔线----------------------------
◎ 广告赞助
◎ 阅读说明READ EXPLANATION
推荐使用第三方专业下载工具下载本站软件，使用 WinRAR v3.10 以上版本解压本站软件。
本站空间有限.资源到网盘下载.谢谢&& 赞助本站(广告),联系站长QQ&&
为加快源码更新本站源码未全部调试.所以有关源码问题请到交流,讨论,
如须购买金币(升级VIP)&本站解压密码
下载本站资源，如果服务器暂不能下载请过一段时间重试！
如果遇到什么问题，请到本站论坛去咨寻，我们将在那里提供更多 、更好的资源！
本站提供的一些商业软件是供学习研究之用，如用于商业用途，请购买正版。欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> Css cursor鼠标指针鼠标光标样式教程篇
我们在布局时候，我们会遇到对对象内鼠标指针光标进行控制，比如鼠标经过指针变为手指形状等样式，接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外，可以通过设置图片为鼠标指针，常见有些网站鼠标指针是各种各样小图片样式，当然这个是通过css cursor设置鼠标样式。
扩展阅读：
一、cursor语法与结构
1、cursor语法：
cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)
常用cursor光标说明
1）、{ cursor:default&}默认正常鼠标指针
2）、div{ cursor:hand }和div{ cursor:text } 文本选择效果
3）、div{ cursor:move } 移动选择效果
4）、div{ cursor:pointer } 手指形状 链接选择效果
5）、div{&cursor:url(url图片地址) }设置对象为图片
2、cursor样式效果图
css cursor鼠标光标指针样式图
3、鼠标指针说明
cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
4、布局结构
p { cursor: }
/* ： 设置鼠标移动到对象时鼠标变为文本选择样式 */
a { cursor: } /* css注释： 设置鼠标移动到a超链接对象时鼠标变为手指形状（链接选择） */
{ cursor: url(&小图片地址&)} /* 设置鼠标指针默认为一个小图片 */
扩展阅读：、、a hover、
二、鼠标指针样式总结
鼠标指针样式控制设置是比较常用的，比如日常我们在布局时候，我们希望鼠标指向某个局部对象时候，鼠标指针光标就变为手指状态，这个时候我们就对对象span设置cursor: pointer即可。以上我们图例展示常用的鼠标光标形状与css单词，希望布局时候更加自身需要选择设置鼠标指针样式。需要注意是，光标切记勿滥用，也不要轻易设置自定义图片为鼠标样式这样会将网页造成复杂与不符合用户体验感觉，切记光标慎用。如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • ()• • ()• ()• • • • • • • • • • •
必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• &最新文章NEWS• • • • • • • • • • 相关文章RELATED• • • • • • • • • • CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 11:47
原创：本文 DIVCSS5版权所有。
学习与资源分享平台锁定老帖子
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
等级: 初级会员
来自: 杭州
发表时间：&&
最后修改：
首先先看一段代码
&script type="text/javascript"&
function mouseCoordination(michael){
//以下主要是对不同浏览器进行兼容操作
if(michael.pageX || michael.pageY){
//IE不支持pageX之类的 这里主要是对于chrome 和firefox之类的浏览器
return {x:michael.pageX, y:michael.pageY};
else return {
//以下是IE浏览器的操作动作 至于为什么这么写 待会看图就会明白
x:michael.clientX + document.body.scrollLeft - document.body.clientLeft,
y:michael.clientY + document.body.scrollTop
- document.body.clientTop
function mouseMove(michael){
michael = michael || window. //不知为什么 显示出来 就是多了个michael 应该前面变量只有一个michael的
var mouseCoo = mouseCoordination(michael);
document.getElementById('xCoordination').value = mouseCoo.x;
document.getElementById('yCoordination').value = mouseCoo.y;
document.onmousemove = mouseM
X坐标:&input id="xCoordination" type="text" /&
Y坐标:&input id="yCoordination" type="text" /&
关于javascript中clientX，pageX，offsetX，x，layerX，screenX,offsetLeft之类的图解说明
对clientX等的文字说明
offsetTop
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。
offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
clientHeight
获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
clientLeft
获取 offsetLeft 属性和客户区域的实际左边之间的距离。
clientTop
获取 offsetTop 属性和客户区域的实际顶端之间的距离。
clientWidth
获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
SCROLL属性
scroll
设置或获取滚动是否关闭。
scrollHeight
获取对象的滚动高度。
scrollLeft
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
scrollTop
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
scrollWidth
获取对象的滚动宽度。event属性
x
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
screenX
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标
W3C关于screen给出的例子
&script type="text/javascript"&
function show_coords(event)
x=event.screenX
y=event.screenY
alert("X coords: " + x + ", Y coords: " + y)
&body onmousedown="show_coords(event)"&
&p&Click in the document. An alert box will alert
the x and y coordinates of the cursor.&/p&
offsetX
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
clientX
设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条
W3C对于client给出的例子
&script type="text/javascript"&
function show_coords(event)
x=event.clientX
y=event.clientY
alert("X coords: " + x + ", Y coords: " + y)
&body onmousedown="show_coords(event)"&
&p&Click in the document. An alert box will alert
the x and y coordinates of the mouse pointer.&/p&
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。 简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同， xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。
&
pageX/pageY:
鼠标相对于整个页面的X/Y坐标。
IE不支持！
offsetX/offsetY:
得出的结果跟pageX/pageY一样，既然如此，它有什么存在价值？因为：
只有IE支持！相当于IE下的pageX,pageY.
screenX/screenY:
就是鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过你的屏幕分辨率。
clientX/clientY：
事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算。当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域。
特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY与火狐下的始终大2px
等级: 初级会员
来自: 杭州
发表时间：&&
libmw 写道很好，搜藏了恩 欢迎共享
请登录后投票
等级: 初级会员
来自: 深圳
发表时间：&&
看的眼花啊！实际只要知道这些属性就可以了，用的时候测试一两次就明白了！
请登录后投票
等级: 初级会员
来自: 北京
发表时间：&&
其实重点就是那张图啊！
请登录后投票
跳转论坛:移动开发技术
Web前端技术
Java企业应用
编程语言技术