我之前写过一个 jQuery 小插件：jQuery Ruler，用来测量任意网站元素的尺寸和坐标。
刚才整理了一下，顺便把你需要的代码用原生 Javascript 写出来了。
没有什么实际用途，只是实现绘制矩形和拖拽功能。
jQuery Ruler 写在空间，有演示，有兴趣可以看一下。
hi.baidu.com/keneks/item/04dbaf39d226e8f1e7bb7ab8
<!DOCTYPE html><html>
<head>
<meta charset="gb2312" />
<title></title>
<style type="text/css">
.box {
background: #f00
width: 0px
height: 0px
position: absolute
opacity: 0.5
cursor: move
}
</style>
<script type="text/javascript">
window.onload = function(e) {
e = e || window.event
// startX, startY 为鼠标点击时初始坐标
// diffX, diffY 为鼠标初始坐标与 box 左上角坐标之差，用于拖动
var startX, startY, diffX, diffY
// 是否拖动，初始为 false
var dragging = false
// 鼠标按下
document.onmousedown = function(e) {
startX = e.pageX
startY = e.pageY
// 如果鼠标在 box 上被按下
if(e.target.className.match(/box/)) {
// 允许拖动
dragging = true
// 设置当前 box 的 id 为 moving_box
if(document.getElementById("moving_box") !== null) {
document.getElementById("moving_box").removeAttribute("id")
}
e.target.id = "moving_box"
// 计算坐标差值
diffX = startX - e.target.offsetLeft
diffY = startY - e.target.offsetTop
}
else {
// 在页面创建 box
var active_box = document.createElement("div")
active_box.id = "active_box"
active_box.className = "box"
active_box.style.top = startY + 'px'
active_box.style.left = startX + 'px'
document.body.appendChild(active_box)
active_box = null
}
}
// 鼠标移动
document.onmousemove = function(e) {
// 更新 box 尺寸
if(document.getElementById("active_box") !== null) {
var ab = document.getElementById("active_box")
ab.style.width = e.pageX - startX + 'px'
ab.style.height = e.pageY - startY + 'px'
}
// 移动，更新 box 坐标
if(document.getElementById("moving_box") !== null &&dragging) {
var mb = document.getElementById("moving_box")
mb.style.top = e.pageY - diffY + 'px'
mb.style.left = e.pageX - diffX + 'px'
}
}
// 鼠标抬起
document.onmouseup = function(e) {
// 禁止拖动
dragging = false
if(document.getElementById("active_box") !== null) {
var ab = document.getElementById("active_box")
ab.removeAttribute("id")
// 如果长宽均小于 3px，移除 box
if(ab.offsetWidth <3 || ab.offsetHeight <3) {
document.body.removeChild(ab)
}
}
}
}
</script>
</head>
<body>
<p>点击鼠标左键并拖动绘制矩形</p>
</body>
</html>
可以给你想要显示不同鼠标样式的元素加个css样式。在css样式里面有很多鼠标样式可以选择。具体的语法就是.classone {cursor:pointer} 其中classone是你元素的class名称，后面pointer就是你想要的鼠标样式。这个样式的属性有很多，包括
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
具体你可以在http://www.w3school.com.cn/tiy/t.asp?f=csse_cursor 这里看到效果
如果还有不明白的我尽量帮忙，希望能够对你有帮助^^
这个可以用canvas来画，先说最简单的一种 就是给一个盒子 加上边框方法一：html部分写一个div
<div></div>
css 部分：div{
width:200px//给200像素的宽
height:200px//给200像素的高
border:1px solid #000 //给一个边框 颜色为黑色
background:transparent// 给这个盒子一个透明的背景色
}
好了 ，这个是一个非常简单的 矩形盒子，不过通常都是用H5 的canvas来做的
方法二： html代码 ，创建canvas画布
<canvas id="myCanvas">您的浏览器不支持H5 canvas属性</canvas>
然后就是js 部分了
var c=document.getElementById("myCanvas") //获取canvas
var ctx=c.getContext("2d")创建一个2D 对象
ctx.beginPath() //
ctx.lineWidth="6"//线条宽度
ctx.strokeStyle="red"//设置为黑色
ctx.rect(5,5,290,140)//创建矩形，起始点的x y坐标，和矩形宽高
ctx.stroke() //绘制矩形（无填充） [有填充用 ctx.fill（）]
也是可以直接写
var canvas=document.getElementById('myCanvas')
var ctx=canvas.getContext('2d')
ctx.fillStyle='#FF0000'
ctx.fillRect(0,0,80,100) //起始坐标和填充色
方法三：通过绘制路径来画矩形
var c=document.getElementById("myCanvas")
var cxt=c.getContext("2d")
cxt.moveTo(10,10) //起始点
cxt.lineTo(50,10) //结束点 同时也是下一个结束点的起始点
cxt.lineTo(50,50)
cxt.lineTo(10,50)
cxt.lineTo(10,10)
cxt.stroke()
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）