jQuery实现的鼠标框和实例代码，为框中的数据选择。

jQuery库：

-1.10.2.min.js jQuery，jQuery UI - v1.12.1。

jQuery代码

不要在代码之间多说，看看那些你不明白的注释。
鼠标的坐标被按下。
Var mouseDownX；
Var mouseDownY；
移动鼠标向下移动
Var mouseMoveX；
Var mouseMoveY；
移动/状态
无功ismove = false；
初始化选择框*
函数init（）{
$（#选择）Css（显示。
$（#选择）Css（上。
$（#选择）。Css（左
$（#选择）Css（宽。
$（#选择）。Css（高
}
$（文档）Ready（函数（）{）
init（）；
无功selectedtd =新（阵列）； / /创建所选表
var = $（）；获取所有信息表
对于（var i = 0；i < td.length；i++）{
SelectedTD.push（TD {我}）；
}
$（# tablediv）。Mousedown（函数（事件）{
mousedownx = event.clientx至（这）。偏移（左）；；
mousedowny = event.clienty至（这）。偏移（顶部）；
console.log（mousedownx =+ mousedownx +mousedowny =+ mousedowny）；
如果（event.target.id.match（ /选择/））{
ismove =真；
}
判断/移动鼠标（拖动或边框）
$（# tablediv）。Mousemove（函数（事件）{
mousemovex = event.clientx至（这）。偏移（左）；
mousemovey = event.clienty至（这）。偏移（顶部）；
无功selectdiv = document.getelementbyid（选择）；
如果（ismove）{
拖动代码，因为它不计算到XY，所以使用jQuery UI
$（#选择）Draggable（）；
这部分主要负责帧的时间/帧，帧的实时颜色，（代码和下面的代码重复）
VaR selectdiv.offsetleft左=，= = selectdiv.offsetwidth selectdiv.offsettop；宽度，高度= selectdiv.offsetheight；
对于（var i = 0；i < selectedtd.length；i++）{
VaR SL = selectedtd {我}。offsetwidth + selectedtd {我}。offsetleft；
var st = selectedtd {我}。offsetheight + selectedtd {我}。offsettop；
如果（SL >左圣>上selectedtd {我}。offsetleft <左+宽度selectedtd {我}。offsettop <顶+高）{
如果（selectedtd {我}。classname.indexof（选择）= = 1）{
SelectedTD {我}。类名=选择；
}
{人}
如果（selectedtd {我}。classname.indexof（选择）！= 1）{
SelectedTD {我}。类名=TD；
}
}
}
{人}
重复代码，然后提取
VaR selectdiv.offsetleft左=，= = selectdiv.offsetwidth selectdiv.offsettop；宽度，高度= selectdiv.offsetheight；
对于（var i = 0；i < selectedtd.length；i++）{
VaR SL = selectedtd {我}。offsetwidth + selectedtd {我}。offsetleft；
var st = selectedtd {我}。offsetheight + selectedtd {我}。offsettop；
如果（SL >左圣>上selectedtd {我}。offsetleft <左+宽度selectedtd {我}。offsettop <顶+高）{
如果（selectedtd {我}。classname.indexof（选择）= = 1）{
SelectedTD {我}。类名=选择；
}
{人}
如果（selectedtd {我}。classname.indexof（选择）！= 1）{
SelectedTD {我}。类名=TD；
}
}
}
框架的末端并举起/拖动鼠标。
$（# tablediv）。Mouseup（function（）{）
console.log（mouseupx =+ mousemovex +mouseupy =+ mousemovex）；
ismove = false；
$（这）Unbind（'mousemove）；
}）
/帧
displayselected（mousedowny，mousedownx，mousemovex，mousemovey）；
}
}）
}）
当鼠标在绘制框中时，改变鼠标指针的样式，是一个十字形。
$（#选择）。Mouseenter（function（）{）
$（#选择）Css（光标。
}）；
}）；
功能displayselected（mousedowny，mousedownx，mouseupx，mouseupy）{
$（#选择）Css（显示。
$（#选择）Css（上。
$（#选择）。Css（左
VaR Movex = mousemovex - mousedownx；
无功movey = mousemovey - mousedowny；
如果（movey＜0）{
$（#选择）Css（上。
}
如果（Movex＜0）{
$（#选择）。Css（左
}
$（#选择）Css（宽。
$（#选择）。Css（高
}
HTML测试

使用表进行的测试：




设计素描

以上是萧边介绍jQuery实现鼠标框、检查框的数据，希望能帮助你。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。