事件高级（二）
- 可重用的选项卡实例
<style>
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
#div2 input {background:#CCC;}
#div2 .active {background:yellow;}
#div2 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
tabSwitch('div1');
tabSwitch('div2');
};
function tabSwitch(id)
{
var oDiv=document.getElementById(id);
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
var i=0;
for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
};
}
}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="财经" />
<input type="button" value="aaa" />
<div style="display:block;">1asdfasdfds</div>
<div>2xzcvxzcv</div>
<div>5332342345</div>
</div>
<div id="div2">
<input class="active" type="button" value="教育" />
<input type="button" value="财经" />
<input type="button" value="aaa" />
<div style="display:block;">1asdfasdfds</div>
<div>2xzcvxzcv</div>
<div>5332342345</div>
</div>
</body>
- 限制范围的拖拽实例
- 磁性吸附的拖拽实例
- 解决拖拽问题一：选中文字
- 事件捕获：setCapture()与releaseCapture()
- 合并代码，共用函数
- 碰撞检测原理
- 与DOM配合，制作带框的拖拽实例
- 处理带框拖拽的细节部分
- 用拖拽改变DIV大小实例
