js set Cursor style.

最新推荐文章于 2023-12-04 09:47:53 发布
最新推荐文章于 2023-12-04 09:47:53 发布
阅读量1.1k 收藏
点赞数
分类专栏： js

http://www.javascripter.net/faq/stylesc.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script language="JavaScript">

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

</script>
</head>
<body>
	<span style="cursor: auto;">auto</span>
	<span style="cursor: move;">move</span>
	<span style="cursor: no-drop;">no-drop</span>
	<span style="cursor: col-resize;">col-resize</span>
	<span style="cursor: all-scroll;">all-scroll</span>
	<span style="cursor: pointer;">pointer</span>
	<span style="cursor: not-allowed;">not-allowed</span>
	<span style="cursor: row-resize;">row-resize</span>
	<span style="cursor: crosshair;">crosshair</span>
	<span style="cursor: progress;">progress</span>
	<span style="cursor: e-resize;">e-resize</span>
	<span style="cursor: ne-resize;">ne-resize</span>
	<span style="cursor: default;">default</span>
	<span style="cursor: text;">text</span>
	<span style="cursor: n-resize;">n-resize</span>
	<span style="cursor: nw-resize;">nw-resize</span>
	<span style="cursor: help;">help</span>
	<span style="cursor: vertical-text;">vertical-text</span>
	<span style="cursor: s-resize;">s-resize</span>
	<span style="cursor: se-resize;">se-resize</span>
	<span style="cursor: inherit;">inherit</span>
	<span style="cursor: wait;">wait</span>
	<span style="cursor: w-resize;">w-resize</span>
	<span style="cursor: sw-resize;">sw-resize</span>
	<div>
		<a id="e1h" href="#" style="cursor: help;" οnclick="setCursorByID('e1','help');return false;">help</a> 
		<a id="e1w" href="#" style="cursor: wait;" οnclick="setCursorByID('e1','wait');return false;">wait</a>
		<a id="e1m" href="#" style="cursor: move;" οnclick="setCursorByID('e1','move');return false;">move</a> 
		<a id="e1c" href="#" style="cursor: crosshair;" οnclick="setCursorByID('e1','crosshair');return false;">crosshair</a>
		<a id="e1t" href="#" style="cursor: text;" οnclick="setCursorByID('e1','text');return false;">text</a> 
		<a id="e1a" href="#" style="cursor: default;" οnclick="setCursorByID('e1','default');return false;">default</a> 
		<a id="e1a" href="#" style="cursor: pointer;" οnclick="setCursorByID('e1','pointer');return false;">pointer</a> 
		<a id="e1a" href="#" style="cursor: auto;" οnclick="setCursorByID('e1','auto');return false;">auto</a>
	</div>
	<div>
		<a id="e1" href="#" οnclick="setCursorByID('e1','help');return false;">test</a> 
	</div>
</body>
</html>


terry1989
关注
专栏目录
three.js实现全套3d测距功能(附完整代码)
codingWeb的博客
04-24 3722
网上关于测距的实现都是比较片面的,没有完整的例子,最近因为需求,有对相关需求进行实现,给出我的实现方案,供大家参考 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
聊一聊cropper.js
weixin_45731450的博客
01-30 1739
最近的项目中有一个纯前端实现的功能困扰了我好久，就是用户上传图片以后需要用户进入图片裁剪页并完成上传的功能，一开始我是打算自己去用canvas去写这样一个页面的，但是项目开发周期短，任务紧，所以我就在网上各种扒资源，还真让我找到了这么一款神仙插件——cropper.js。 cropper.js jQuery.cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。 官方地址：http://fe
JavaScript Set Cursor Style
aodai0798的博客
12-31 191
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> <script language="JavaScript"> function setCurs...
Cursor:url()的使用
weixin_34026276的博客
05-22 632
自定义鼠标样式，格式：css:{cursor:url('绝对路径的图片(格式：cur,ico)'),-moz-zoom-out;}//FF下面css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以前面url是自定义鼠标格式，图像的绝对路径地址，后面的参数是css标准的cursor样式，（IE下面可以不需要）图标的格式根据不同的浏览器来分：IE支持cur...
Cursor style
weixin_30378311的博客
10-29 178
鼠标样式 默认(指针) cursor : auto | default 手指 cursor :pointer | hand(据说是为了适应IE5，由于没有IE5无从考证) 十字 cursor : crosshair 拖动 cursor : move 改变大小 cursor :e-resize,w-resize,s-resize,n-resize; ne-resize, nw-r...
css js:cursor属性
weixin_30693183的博客
06-27 431
定义： 规定要显示的光标形状 CSS用法: JS用法 object.style.cursor="crosshair" 转载于:https://www.cnblogs.com/carolina/p/5621669.html
鼠标光标样式(cursor style)大全
lincnl的专栏
06-13 2700
MathJax.Hub.Queue(["Typeset", MathJax.Hub, newFormula]); newFormula.addEventListener("dblclick", function(event) { event.stopPropagation(); }); newFormula.addEventListener("mousedown", function(event) { event.stopPropagation(); selectedFormula = newFormula; isDragging = true; newFormula.style.cursor = "move"; }); newFormula.addEventListener("mouseup", function(event) { event.stopPropagation(); isDragging = false; newFormula.style.cursor = "auto"; }); newFormula.addEventListener("mousemove", function(event) { event.stopPropagation(); if (isDragging && selectedFormula === newFormula) { var newX = event.clientX - selectedFormula.offsetWidth / 2; var newY = event.clientY - selectedFormula.offsetHeight / 2; selectedFormula.style.left = newX + "px"; selectedFormula.style.top = newY + "px"; } }); newFormula.addEventListener("keydown", function(event) { if (event.key === "Enter") { event.preventDefault(); newFormula.blur(); MathJax.Hub.Queue(["Typeset", MathJax.Hub, newFormula]); } }); } document.getElementById("canvas").addEventListener("dblclick", function(event) { navigator.clipboard.readText().then(function(text) { if (text) { var latexCode = text.trim(); if (latexCode) { createFormula(latexCode, event.clientX, event.clientY); } } }); }); document.getElementById("canvas").addEventListener("click", function(event) { if (event.target === document.getElementById("canvas")) { if (selectedFormula) { selectedFormula.style.border = "none"; selectedFormula = null; isDragging = false; } } }); </script> </body> </html>
07-14
- `MathJax.Hub.Queue(["Typeset", MathJax.Hub, newFormula]);`: 这行代码将新创建的数学公式添加到MathJax队列中，以便在MathJax准备好渲染时对其进行排队。 - `newFormula.addEventListener("dblclick", ...
jQuery.cursor:使用jQuery标记更改光标的简便方法！
05-01
// set current cursor style relative to document BODY $.cursor('position'); // return current cursor position relative to document page $.cursor('position', 'client'); // return current cursor ...
<!DOCTYPE html> <html> <head> <title>MathJax Example</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script> <style> .mathjax-formula { font-size: 2.8em; background-color: green; position: absolute; left: 0; top: 0; cursor: move; padding: 5px; border-radius: 5px; color: white; } </style> </head> <body> <div id="mathjax-formulas-container"></div> <script> var formulas = []; document.addEventListener("click", function(event) { var mathjaxFormulasContainer = document.getElementById("mathjax-formulas-container"); navigator.clipboard.readText().then(function(text) { if (text) { var latexCode = text.trim(); if (latexCode) { var newFormula = document.createElement("div"); newFormula.className = "mathjax-formula"; newFormula.style.left = event.clientX + "px"; newFormula.style.top = event.clientY + "px"; newFormula.innerText = latexCode; mathjaxFormulasContainer.appendChild(newFormula); formulas.push({ latexCode: latexCode, position: { x: event.clientX, y: event.clientY } }); MathJax.Hub.Queue(["Typeset", MathJax.Hub, newFormula]); } } }); }); </script> </body> </html>
07-13
这是一个使用 MathJax 渲染数学公式的示例网页。它包含一个用于显示公式的容器（`mathjax-formulas-container`），当用户点击页面时，会将剪贴板中的文本作为 LaTeX 代码解析并显示为数学公式。...
JavaScript中改变鼠标指针样式的方法
icon-Y的博客
06-09 9032
JavaScript中改变鼠标指针样式的方法
Echarts中自定义图标作为鼠标指针
qq_46344419的博客
08-18 1060
Echarts中自定义图标作为鼠标指针
JS 实现自定义光标
最新发布
zhaojjjjjj163的博客
12-04 685
【代码】JS 实现自定义光标。
光标怎么设置sap_ABAP光标的问题
weixin_39578513的博客
12-22 973
应该是没有问题的，你调用这个FORM是在哪里调用的？给你一段代码参考一下吧。这段代码是我用的也是好用的。ATSELECTION-SCREEN.PERFORMCHECK_PERIOD.IFRB_CSV=CNS_XAND(SY-UCOMM=SPACEORSY-UCOMM='ONLI').IFC_SERPC=CNS_X.PERFORMCHECK_DOWNLOAD_F...
JS自定义光标案例
qq_44920883的博客
12-17 1037
<img src="images/xxx.png"> img{ position: absolute; width: 50px; height: 50px; top: 100px; left: 100px; cursor: none; } var pic=document.querySelector('img'); doc..
ABAP选择屏幕设置必填Required =‘2‘,回车时光标跳转到必填字段
weixin_44911062的博客
09-28 4949
需求：程序中设置选择屏幕字段为Required = ‘2’（存在必填标记，却不进行必填校验）时，用户希望在选择屏幕界面回车的时候，光标会自动跳转到必填字段上，可以带给用户更好的使用体验。 需要在 AT SELECTION-SCREEN OUTPUT事件中，增加SET CURSOR FIELD语句，实现方式如下代码。 TABLES marc. SELECT-OPTIONS: s_matnr FOR marc-matnr. PARAMETERS: p_werks TYPE resb-werks,
set cursor 设置焦点
05-15 3573
set cursor field 这个是设置鼠标焦点到字段 SET CURSOR 设置到鼠标焦点列还是行 SET CURSOR LINE 设置鼠标焦点到行 这个是设置鼠标焦点的。 GET CURSOR  field  这个相对应的获取鼠标焦点得到的字段
JS获取和设置光标的位置
℡メ㏑╭ァ小凯
10-12 4938
function getCursortPosition (ctrl) {//获取光标位置函数 var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); var Sel = document.selection.createRange (); Sel.moveStart ('character',
MFC 设置光标 SetCursor(HCURSOR hCursor)用法。
热门推荐
曾伟的专栏
03-16 1万+
VC++ 6.0 设定光标可以使用SetCursor(HCURSOR hCursor)来设定，如果是新手，建议在WM_SETCURSOR消息响应函数中设置，你可以在别的地方设置，但是需要自己控制光标的变化。        1、使用系统预定义的光标：        使用ClassWizard为视图或者对话框添加WM_SETCURSOR消息的响应函数OnSetCursor();在函数中，使用Set
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值