船长 发表于 2009-03-15 12:48 | 分类：javascript | 阅读数：1,296 次
mootools拖动层效果，运行代码可以查看效果，下载本地请保存窗口内代码，并且下载mootools.js即可
<!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>Untitled Document</title> <style type="text/css"> body { color:#232323; font-family:"Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif; font-size:13px; } h1, p{ border:0; margin:0; padding:0; } a:link, a:visited, a:hover{color:#0066CC;} .window{ border:solid 6px #DEDEDE; background:#FFF; width:200px; height:150px; display:none; } .window h1{ font-size:11px; background:#DEDEDE; height:16px; line-height:16px; padding-bottom:6px; } .window p{ font-size:11px; padding:8px; } .msg{ float:right; font-weight:normal; font-size:11px; } </style> <script type="text/javascript" src="http://www.songlecn.com/wp-content/files/mootools.js"></script> <script type="text/javascript"> window.addEvent('domready', function(){ $$('#draggables div').each(function(drag){ new Drag.Move(drag); }); $$('#draggables span a').each(function(o){ $(o).addEvents({'click' : function(event){ $(o.id+'_w').setStyle('display', 'none'); } }) }); $$('#buttons a').each(function(o){ $(o).addEvents({'click' : function(event){ $(o.id+'_w').setStyle('display', 'block');} }) }); }); </script> </head> <body> <div style="color:red;">*请再次刷新页面，然后点击下面的链接查看效果</div> <div id="buttons"> <a href="#" id="setting">显示窗口1</a> | <a href="#" id="contact">显示窗口2</a> </div> <div id="draggables"> <div id="setting_w" class="window"> <h1><span class="msg"><a href="#" id="setting">关闭</a></span>窗口1</h1> <p>窗口1内容</p> </div> <div id="contact_w" class="window"> <h1><span class="msg"><a href="#" id="contact">关闭</a></span>窗口2</h1> <p>窗口2内容</p> </div> </div> </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
