码迷,mamicode.com
首页 > Windows程序 > 详细

Day9--------windowDrag

时间:2014-11-28 20:04:15      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   使用   sp   

 //-----------使用嵌套的事件完成窗口的拖拉效果
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>

 

Day9--------windowDrag

标签:style   blog   http   io   ar   color   os   使用   sp   

原文地址:http://www.cnblogs.com/fleshy/p/4129228.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!