兼容ie ff div 层 打开+关闭+ 拖动+遮罩+移动+动画改变高宽_javascript技巧

1 拖动+遮罩+移动+改变元素大小

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>popper.w's code</title> <style type="text/css"> body{text-align:center} #dd{ margin:50px auto} #odiv{ width:400px; height:200px;border:1px dotted red; border:1px dashed green;} #odiv ul{ list-style:none; text-align:left; width:150px; font-size:11px;} #odiv ul li{height:25px; line-height:25px; border-bottom:1px dashed green;} #ho{ width:150px; height:150px; border:1px dotted red} </style> <div id="test"> <h1 id="dd">Just a Test</h1> <input type="button" id="test1" value="XslideUp-H"><input type="button" id="test2" value="XslideDown-H"><input type="button" id="test3" value="XslideUp-W"><input type="button" id="test4" value="XslideDown-W"><input type="button" id="test5" value="Xcover"><input type="button" id="test6" value="Xmove"><input type="button" id="test7" value="Xdrag"> </div> <div id="odiv"> <h1 id="oTitle">什么时候能拖动我啊</h1> <ul> <li>Author:popper.w</li> <li>Email:[e-mail]</li> <li>QQ:84101340</li> <li>webSite: [url]www.hongwei2008.cn[/url]</li> </ul> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2 层打开效果

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> body{} #main{width:500px; margin:100px; height:500px;border:1px solid red} #test{border:1px solid red;display:none;width:10px;height:10px; background:yellow} </style> <title>Code By popper.w</title> <input type="button" value="点击打开" id="bt"><input type="button" value="点击关闭" id="bt1"><div id="main"> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]