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

(编辑：jimmy 日期: 2025/5/12 浏览：3 次 )

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>      <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>  </head> <body>                            <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" />                        <h1 id="oTitle">什么时候能拖动我啊</h1>         <ul>             <li>Author:popper.w</li>             <li>Email:popper11@126.com</li>             <li>QQ:84101340</li>             <li>webSite: [url]www.hongwei2008.cn[/url]</li>         </ul>                 </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

2 层打开效果

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：点图片上一页下一页翻页效果
下一篇：JS的数组的扩展实例代码

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

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