|
js 实现 切分条效果， 为了熟悉js 写法，纯javascript 脚本编写
简单介绍几个函数：
setCapture()函数的作用就是将后续的mouse事件都发送给这个对象，
releaseCapture() 就是将鼠标事件还回去
由document、window、object之类的自行来处理，这样就保证了在拖动的过程中，不会由于经过了其它的元素而受到干扰。另外，还有一个很重 要的事情是，在Win32上，mouse move的事件不是一个连续的，也就是说，并不是我们每次移动1px的鼠标指针，就会发生一个mousemove，windows会周期性检查mouse的位置变化来产生mousemove的事件。所以，如果是一个很小的页面对象，比如一个直径5px的圆点，如果没有setCapture和releaseCapture，那么在鼠标按住之后，快速的移动鼠标，就有可能鼠标移动走了，但是小圆点还在原地，就是因为下一次的mousemove事 件已经不再发给这个圆点对象了。
复制代码
var siblingElem = function (elem)
{
var _nodes = [];
while ((elem = elem.previousSibling))
{
if (elem.nodeType === 1)
{ _nodes.push(elem); break; }
}
return _nodes[0];
}
var nextElem = function (elem)
{
var _nodes = [];
while ((elem = elem.nextSibling))
{
if (elem.nodeType === 1)
{ _nodes.push(elem); break; }
}
return _nodes[0];
}
复制代码
为了方便运用编写一个js 对象
主要方法：根据鼠标移动的坐标计算左右两边容器的宽度
复制代码
move = function (event, f)
{
if (f.flag)
{
if (f.iPner2With - event.clientX - f.ele.offsetWidth > 0)
{
f.objLeft.style.left = (event.clientX f.ele.offsetWidth) 'px';
f.objRight.style.width = (f.iPner2With - event.clientX - f.ele.offsetWidth) 'px';
f.objLeft.style.width = event.clientX 'px';
}
if (!f.ele.releaseCapture)
{
event.preventDefault();
}
}
}
复制代码
复制代码
/****************************************
@Name：LR_spliter 实现table 和div 分割条效果
@Author：胡泽云
@Date：2014-08-27
@邮箱：hzeyun@sina.com
@qq：984559465
@说明： 实例化 new LR_spliter('控件id')
*/
var siblingElem = function (elem)
{
var _nodes = [];
while ((elem = elem.previousSibling))
{
if (elem.nodeType === 1)
{ _nodes.push(elem); break; }
}
return _nodes[0];
}
var nextElem = function (elem)
{
var _nodes = [];
while ((elem = elem.nextSibling))
{
if (elem.nodeType === 1)
{ _nodes.push(elem); break; }
}
return _nodes[0];
}
zy_spliter = function (id)
{
this.flag = false;
this.objSplitter = false;
this.iPner2With = 0;
//获取对象的左右连个容器
this.ele = document.getElementById(id);
this.objLeft = siblingElem(this.ele);
this.objRight = nextElem(this.ele);
this.ele.style.cursor = 'w-resize'; //设置鼠标样式
up = function (event, t)
{
if (t.flag)
{
if (t.ele.releaseCapture)
{
t.ele.releaseCapture();
}
else
{
document.removeEventListener('mouseup', t.up, true);
document.removeEventListener('mousemove', t.move, true);
event.preventDefault();
}
t.flag = false;
}
};
down = function (event, f)
{
if (!f.flag)
{
if (f.ele.setCapture)
f.ele.setCapture();
else
{
document.addEventListener('mouseup', up, true);
document.addEventListener('mousemove', move, true);
event.preventDefault();
}
f.flag = true;
if (f.ele.parentNode.tagName == 'TD')
{
f.iPner2With = f.ele.parentNode.parentNode.offsetWidth;
}
else
{
f.iPner2With = f.ele.parentNode.offsetWidth;
}
}
};
move = function (event, f)
{
if (f.flag)
{
if (f.iPner2With - event.clientX - f.ele.offsetWidth > 0)
{
f.objLeft.style.left = (event.clientX f.ele.offsetWidth) 'px';
f.objRight.style.width = (f.iPner2With - event.clientX - f.ele.offsetWidth) 'px';
f.objLeft.style.width = event.clientX 'px';
}
if (!f.ele.releaseCapture)
{
event.preventDefault();
}
}
}
var t = this;
this.ele.onmousedown = function ()
{
down(event, t);
}
this.ele.onmouseup = function ()
{
up(event, t);
}
this.ele.onmousemove = function ()
{
move(event, t);
}
return this;
}
复制代码
实现效果: 第一种左右两边容器是div ， 第二种 是分割table 单元格的效果
前台html
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www./1999/xhtml'>
<head>
<script type='text/javascript' src='../Js/zeyun_spliter.js'></script>
<script type='text/javascript'>
window.onload = function ()
{
var lsp = new zy_spliter('soliterSS');
var lsp2 = new zy_spliter('sp2');
}
</script>
</head>
<body>
<div style='height: 100px; width: 900px;'>
<div style='width: 450px; float: left; background: red; height: 100%; word-break: break-all;
word-wrap: break-word;'>
asdsdf
</div>
<div id='soliterSS' style='width: 4px; height: 100%; float: left; '>
</div>
<div style='width: 442px; float: left; background: blue; height: 100%; position: relative;
word-break: break-all; word-wrap: break-word;'>
adsfadsfjkl</div>
</div>
<p> table</p>
<table style='height: 100px; width: 900px;' cellspacing='0' cellpadding='0'>
<tr>
<td style=''>
</td>
<td id='sp2' style='width: 4px; height: 100%; '>
<div style='height: 100%;'>
</div>
</td>
<td style=''>
</td>
</tr>
</table>
</body>
</html>
|
|
|
