首页 > 代码库 > Day9--------windowDrag
Day9--------windowDrag
//-----------使用嵌套的事件完成窗口的拖拉效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 </head> 7 <style type="text/css"> 8 #window{width: 200px;height: 100px;position: absolute;width: 660px;height: 360px;} 9 #head{height: 20px;width: 660px;background: #BBB;}10 </style>11 <script type="text/javascript">12 window.onload=function(){13 var tecentX=0;14 var tecentY=0;15 var oHead=document.getElementById(‘head‘);16 var oWindow=document.getElementById(‘window‘)17 oHead.onmousedown=function(ev){18 var oEvent=ev||event;19 tecentX=oEvent.clientX-oWindow.offsetLeft;20 tecentY=oEvent.clientY-oWindow.offsetTop;21 document.onmousemove=function(ev){22 var oEvent=ev||event;23 oWindow.style.left=oEvent.clientX-tecentX+‘px‘;24 oWindow.style.top=oEvent.clientY-tecentY+‘px‘;25 }26 document.onmouseup=function(){27 document.onmousemove=null;28 document.onmouseup=null;29 }30 return false;31 } 32 }33 </script>34 <body>35 <div id="window"><div id="head"></div><embed src="http://www.mamicode.com/file/toyou.swf" width="660px" height="340px" /></div>36 </body>37 </html>
Day9--------windowDrag
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。