`

js改变鼠标的形状和样式

阅读更多
当今多数浏览器支持一下指针样式(将鼠标移动到样式名称上以观察指针样式改变为那个样式):
auto        move           no-drop      col-resize
all-scroll  pointer        not-allowed  row-resize
crosshair   progress       e-resize     ne-resize
default     text           n-resize     nw-resize
help        vertical-text  s-resize     se-resize   
inherit     wait           w-resize     sw-resize

在Windows Internet Explorer 6.0或者更新版本,上面的指针样式如下:


要通过脚本改变某一个元素的鼠标指针样式,你可以把元素的属性element.style.cursor设为上面的任何一个值。(另外一种不用JavaScript的方法,可以在元素的HTML标签中使用属性style="cursor:value;"):

function setCursorByID(id,cursorStyle) {
if (document.getElementById) {
  if (document.getElementById(id).style) {
   document.getElementById(id).style.cursor=cursorStyle;
  }
}
}


补充一个常用的改变鼠标样式的方法:如果你想鼠标移动到某个元素上改变鼠标样式 就在这个元素的样式里加上 cursor:(你想改的样式)。
  • 大小: 4.6 KB
分享到:
评论

相关推荐

    js改变鼠标的形状和样式.pdf

    1. `auto` - 默认的鼠标形状,通常根据操作系统和环境自动选择。 2. `move` - 显示为移动手形,常用于拖放操作。 3. `no-drop` - 禁止放下,表示不允许拖放。 4. `col-resize` 和 `row-resize` - 横向和纵向的调整...

    js改变鼠标的形状和样式的方法

    在网页设计与开发中,改变鼠标的形状和样式是一种常见的交互方式,可以通过CSS和JavaScript来实现。CSS中使用cursor属性可以设置鼠标指针的样式,而JavaScript则可以在特定的事件触发时动态改变鼠标样式。 首先,...

    unity3d改变鼠标的样式 设置光标形状

    在Unity3D游戏开发中,改变鼠标的样式和设置光标形状是常见的需求,这有助于增强用户交互体验,尤其是在创建具有独特界面或者需要特定交互反馈的游戏时。在Unity中,可以使用内置的GUI系统或者Unity的图形渲染管线来...

    arcgis for js自定义鼠标样式.zip

    在ArcGIS for JavaScript API中,自定义鼠标样式是一项重要的功能,它允许开发人员根据应用程序的需求改变地图交互时鼠标的外观和行为。ArcGIS for JS API是Esri公司提供的JavaScript库,用于构建地理信息系统(GIS...

    Cursordemo鼠标指针形状

    在前端开发中,通常使用JavaScript来改变鼠标指针形状。CSS也提供了`cursor`属性,可以设置鼠标悬停在特定元素上时显示的指针样式。例如,`cursor: pointer`会让鼠标显示为手形,常用于链接;`cursor: crosshair`则...

    js设置鼠标

    除了通过 CSS 静态设置鼠标形状外,还可以利用 JavaScript 来根据用户的动作或状态动态地改变鼠标形状。以下是一个简单的示例代码: ```html <!DOCTYPE html> 动态改变鼠标形状示例 #hoverArea { width: ...

    js 特效 html 特效 鼠标形状的随意变换

    js 特效 html 特效 鼠标形状的随意变换 js 特效 html 特效 鼠标形状的随意变换

    js 特效 html 特效 各种形状的鼠标

    js 特效 html 特效 各种形状的鼠标 js 特效 html 特效 各种形状的鼠标

    JavaScript实现的鼠标特效

    三、自定义鼠标形状 JavaScript可以改变鼠标的光标形状,通过`document.body.style.cursor`属性设置。例如,设置`cursor: pointer;`可以让鼠标呈现手型,`cursor: none;`则可以使鼠标消失。 四、动态效果 使用...

    鼠标样式包(拿去用).zip

    此压缩包内的“鼠标样式包”可能包含了CSS、JavaScript或SVG等多种格式的文件,它们用于定义和实现不同的鼠标样式。CSS(层叠样式表)文件可以用来改变鼠标的外观,通过设置`cursor`属性,我们可以轻松地更改鼠标...

    自定义鼠标的样式

    "自定义鼠标的样式"是一个非常有趣且实用的主题,它允许开发者通过HTML、CSS和JavaScript技术来改变默认的鼠标指针外观,提升用户与网站的交互体验。这个Demo展示了如何实现这一功能。 首先,我们要了解HTML在其中...

    js 鼠标位置 div拖拽

    此外,还可以添加防止误触(如防止文本选中)和拖放效果(如鼠标形状改变)等优化。 综上所述,实现一个div拖拽功能需要掌握JavaScript事件处理、鼠标坐标属性以及DOM操作。通过结合这些技术,我们可以创建出用户...

    基于Threejs的鼠标移动图片跟随变形动画特效

    Three.js是一个强大的JavaScript库,专门用于在Web浏览器中创建和展示3D图形,无需用户安装任何插件。它使得Web开发者能够轻松地在网页上构建复杂的3D场景、对象和动画。 在这个特效中,核心技术是Three.js的响应式...

    js跟随鼠标移动旋转心形特效.zip

    "js跟随鼠标移动旋转心形特效"是一个巧妙地结合了JavaScript与图形动画的例子,它使得网页变得更加生动有趣。这个特效的核心在于它能响应用户的鼠标移动,使心形图案随着鼠标的轨迹旋转并随机变换颜色,提升了用户与...

    5种超酷自定义鼠标样式特效

    在“css”文件夹中,会找到定义鼠标样式的CSS代码,可能包括了鼠标形状的SVG路径,以及过渡和动画效果的声明。而在“js”文件夹中的JavaScript文件,可能会包含对鼠标事件的监听和响应,以及与CSS样式变更相关的函数...

    217个鼠标样式打包集

    鼠标样式通常包括但不限于不同形状、颜色、动态效果等,可以根据网站或论坛的主题和风格进行选择,以提高整体的视觉吸引力。 描述中提到,这个压缩包可以帮助解决寻找独特鼠标样式的困扰。这表明,这个资源库提供了...

    js和CSS3自定义鼠标特效

    在网页设计中,鼠标指针通常是系统默认的箭头形状,但通过JavaScript和CSS3,我们可以实现自定义的鼠标特效,为用户带来更丰富的交互体验。本项目中,我们将深入探讨如何利用这两种技术来创建一个动态的、个性化的...

    threejs小狮子与鼠标交互案例

    在本案例中,“threejs小狮子与鼠标交互案例”展示了如何使用流行的JavaScript 3D库Three.js来创建一个三维模型,特别是小狮子模型,并实现它与用户的鼠标交互。Three.js是一个强大的工具,允许开发者在浏览器中创建...

    js鼠标经过文字弹簧动画特效.zip

    总的来说,"js鼠标经过文字弹簧动画特效"是一个结合了JavaScript事件处理、CSS变换和动画原理的实例。通过巧妙地运用这些技术,我们可以创造出各种独特的交互体验,提高网站的趣味性和互动性。在实际开发中,根据...

Global site tag (gtag.js) - Google Analytics