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="file/toyou.swf" width="660px" height="340px" /></div>
36 </body>
37 </html>

 

posted on 2014-11-28 19:09  fleshy  阅读(391)  评论(0)    收藏  举报

导航