两个div 中间线 左右动态调整大小.

没有使用jquery!!!! 

思路简介:

html:
一个大的div . 最外层.里面 三个div . 左边内容 右边内容div 中间那个竖线也是div

js: 重点是鼠标位置的操作.

主要是三个事件

  1. 鼠标按下 中间的移动div:oLine 要记录 x 轴的坐标. disX = clientX oLine.left = 鼠标的 offsetLeft

  2. 鼠标移动

  3. 鼠标放开

js: 才是重点.

function $(id) {
 return document.getElementById(id) 
}
window.onload = function() {
 var oBox = $("box"), oTop = $("top"), oBottom = $("bottom"), oLine = $("line");
 oLine.onmousedown = function(e) {
 var disX = (e || event).clientX;
 oLine.left = oLine.offsetLeft;
 document.onmousemove = function(e) { 
  var iT = oLine.left + ((e || event).clientX - disX);
 var e=e||window.event,tarnameb=e.target||e.srcElement;
  var maxT = oBox.clientWight - oLine.offsetWidth;
  oLine.style.margin = 0;
  iT < 0 && (iT = 0); 
  iT > maxT && (iT = maxT);
  oLine.style.left = oTop.style.width = iT + "px";
  oBottom.style.width = oBox.clientWidth - iT + "px";
 $("msg").innerText='top.width:'+oLine.style.width+'---bottom.width:'+oBottom.style.width+'---oLine.offsetLeft:'+oLine.offsetLeft+'---disX:'+disX+'---tarnameb:'+tarnameb.tagName;
  return false
 }; 
 document.onmouseup = function() {
  document.onmousemove = null;
  document.onmouseup = null; 
  oLine.releaseCapture && oLine.releaseCapture()
 };
 oLine.setCapture && oLine.setCapture();
 return false
 };
};

代码详细解释

function $(id) { return document.getElementById(id) }

定义一个函数,函数名叫$。 接收一个参数id , 调用时返回id为此id的元素对象。 return直接返回一个对象。函数没有声明对象类型。个人理解就是element或object吧。呵呵。

这里没有引用jquery 所以也就不能使用$. 要用$就自己写 $函数了….

就是一种简洁的函数名称定义方式而已,就像jquery里面的选择器$(“”) 你这个方法不就是通过id获取该id的html标签对象么 html里面的变量 是不能直接在js里面使用的. 要么在js里面重新定义 要么就用 document.getElementById(id) 获取html里面的id.

e = e||window.event

e 是参数, window.event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 这句话的意思,e对象存在时回返e,当window.event存在时返回event,这样就区分ff,ie了。 

event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。

ie中事件是全局变量window.event可以随时拿到 ,其它浏览器必须在参数中传递才能获取事件 其它浏览器中默认第一个参数传递的是事件,如果你显示的传递了别的参数,这个事件你将无法获得,所以要兼容每个浏览器,方法内首先要判断这个e参数,如果没有则是ie的判断 简单的方法是 e = e||window.event

var tarnameb=e.target||e.srcElement;

这是一种规范,ie下支持e.srcElement,ff支持e.target,没啥原理。 是触发event事件的元素对象

targrt: target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

<script type="text/javascript">
function getEventTrigger(event)
  { 
  x=event.target; 
  alert("The id of the triggered element: "
  + x.id);
  }
</script>