JS特效：弹出窗口

  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 < script  language ="javascript" >
  5var popup_dragging = false;
  6var popup_target;
  7var popup_mouseX;
  8var popup_mouseY;
  9var popup_mouseposX;
 10var popup_mouseposY;
 11var popup_oldfunction;
 12function popup_display(x)
 13{
 14  var win = window.open();
 15  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
 16}
 17// ----- popup_mousedown -------------------------------------------------------
 18function popup_mousedown(e)
 19{
 20  var ie = navigator.appName == "Microsoft Internet Explorer";
 21  if ( ie  &&  window.event.button != 1) return;
 22  if (!ie  &&  e.button            != 0) return;
 23  popup_dragging = true;
 24  popup_target   = this['target'];
 25  popup_mouseX   = ie ? window.event.clientX : e.clientX;
 26  popup_mouseY   = ie ? window.event.clientY : e.clientY;
 27  if (ie)
 28       popup_oldfunction      = document.onselectstart;
 29  else popup_oldfunction      = document.onmousedown;
 30  if (ie)
 31       document.onselectstart = new Function("return false;");
 32  else document.onmousedown   = new Function("return false;");
 33}
 34// ----- popup_mousemove -------------------------------------------------------
 35function popup_mousemove(e)
 36{
 37  if (!popup_dragging) return;
 38  var ie      = navigator.appName == "Microsoft Internet Explorer";
 39  var element = document.getElementById(popup_target);
 40  var mouseX = ie ? window.event.clientX : e.clientX;
 41  var mouseY = ie ? window.event.clientY : e.clientY;
 42  element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
 43  element.style.top  = (element.offsetTop +mouseY-popup_mouseY)+'px';
 44  popup_mouseX = ie ? window.event.clientX : e.clientX;
 45  popup_mouseY = ie ? window.event.clientY : e.clientY;
 46}
 47// ----- popup_mouseup ---------------------------------------------------------
 48function popup_mouseup(e)
 49{
 50  if (!popup_dragging) return;
 51  popup_dragging = false;
 52  var ie      = navigator.appName == "Microsoft Internet Explorer";
 53  var element = document.getElementById(popup_target);
 54  if (ie)
 55       document.onselectstart = popup_oldfunction;
 56  else document.onmousedown   = popup_oldfunction;
 57}
 58// ----- popup_exit ------------------------------------------------------------
 59function popup_exit(e)
 60{
 61  var ie      = navigator.appName == "Microsoft Internet Explorer";
 62  var element = document.getElementById(popup_target);
 63  popup_mouseup(e);
 64  element.style.visibility = 'hidden';
 65  element.style.display    = 'none';
 66}
 67// ----- popup_show ------------------------------------------------------------
 68function popup_show()
 69{
 70  element      = document.getElementById('popup');
 71  drag_element = document.getElementById('popup_drag');
 72  exit_element = document.getElementById('popup_exit');
 73  element.style.position   = "absolute";
 74  element.style.visibility = "visible";
 75  element.style.display    = "block";
 76    element.style.left = (document.documentElement.scrollLeft+popup_mouseposX-10)+'px';
 77    element.style.top  = (document.documentElement.scrollTop +popup_mouseposY-10)+'px';
 78  drag_element['target']   = 'popup';
 79  drag_element.onmousedown = popup_mousedown;
 80  exit_element.onclick     = popup_exit;
 81}
 82// ----- popup_mousepos --------------------------------------------------------
 83function popup_mousepos(e)
 84{
 85  var ie = navigator.appName == "Microsoft Internet Explorer";
 86  popup_mouseposX = ie ? window.event.clientX : e.clientX;
 87  popup_mouseposY = ie ? window.event.clientY : e.clientY;
 88}
 89// ----- Attach Events ---------------------------------------------------------
 90if (navigator.appName == "Microsoft Internet Explorer")
 91     document.attachEvent('onmousedown', popup_mousepos);
 92else document.addEventListener('mousedown', popup_mousepos, false);
 93if (navigator.appName == "Microsoft Internet Explorer")
 94     document.attachEvent('onmousemove', popup_mousemove);
 95else document.addEventListener('mousemove', popup_mousemove, false);
 96if (navigator.appName == "Microsoft Internet Explorer")
 97     document.attachEvent('onmouseup', popup_mouseup);
 98else document.addEventListener('mouseup', popup_mouseup, false);
 99 </ script >
100 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
101 < title > 无标题文档 </ title >
102 < style  type ="text/css" >
103
104div.sample_popup {}{ z-index: +1; }
105div.menu_form_header{}{
106cursor:move
107}
108div.sample_popup div.menu_form_header
109{}{
110  border: 1px solid black;
111  border-bottom: 0px;
112  cursor: default;
113  width: 200px;
114  height:      20px;
115  line-height: 19px;
116  vertical-align: middle;
117  background: url('http://bbs.blueidea.com/attachments/2007/7/11/20070711_e26d3e50d0d8b886020abTHgvNiRn8J0.png') no-repeat;
118  text-decoration: none;
119  font-family: "Times New Roman", Serif;
120  font-weight: 900;
121  font-size: 13px;
122  color: #206040;
123}
124div.sample_popup div.menu_form_body
125{}{
126  border: 1px solid black;
127  width: 200px;
128  background: url('http://bbs.blueidea.com/attachments/2007/7/11/20070711_e45dd0be648898799dacqSVztsCDIfid.png') no-repeat left bottom;
129}
130div.sample_popup img.menu_form_exit
131{}{
132  float: right;
133  margin: 4px 5px 0px 0px;
134  cursor: pointer;
135}
136div.sample_popup table
137{}{
138  border-collapse: collapse;
139  width: 100%;
140}
141div.sample_popup th
142{}{
143  width: 1%;
144  padding: 0px 5px 1px 0px;
145  text-align: left;
146  font-family: "Times New Roman", Serif;
147  font-weight: 900;
148  font-size: 13px;
149  color: #004060;
150}
151div.sample_popup td
152{}{
153  width: 99%;
154  padding: 0px 0px 1px 0px;
155}
156div.sample_popup form
157{}{
158  margin: 0px;
159  padding: 8px 10px 10px 10px;
160}
161div.sample_popup input.field
162{}{
163  border: 1px solid #808080;
164  width: 95%;
165  font-family: Arial, Sans-Serif;
166  font-size: 12px;
167}
168div.sample_popup input.btn
169{}{
170  margin-top: 2px;
171  border: 1px solid #808080;
172  background-color: #DDFFDD;
173  font-family: Verdana, Sans-Serif;
174  font-size: 11px;
175}
176a {}{
177 color: #FF0000;
178 text-decoration: none;
179}
180 </ style >
181 </ head >
182 < body >
183 < input  type ="button"  onclick ="popup_show()"   value ='登录' />
184 < div  class ="sample_popup"      id ="popup"  style ="visibility: hidden; display: none;" >
185 < div  class ="menu_form_header"  id ="popup_drag" >
186 < img  class ="menu_form_exit"    id ="popup_exit"  src ="http://bbs.blueidea.com/attachments/2007/7/11/20070711_45970b8e6254b86494b4cIUp1bV26gbe.png"   />
187    Login
188 </ div >
189 < div  class ="menu_form_body" >
190 < form  method ="post"  action ="" >
191 < table >
192 < tr >
193    < th > Username: </ th >
194    < td >< input  class ="field"  type ="text"  onfocus ="select();"   /></ td >
195 </ tr >
196 < tr >
197    < th > Password: </ th >
198    < td >< input  class ="field"  type ="password"  onfocus ="select();"   /></ td >
199 </ tr >
200 < tr >
201    < th >   </ th >
202    < td >< input  class ="btn"  type ="submit"  value ="Submit"   /></ td >
203 </ tr >
204 </ table >
205 </ form >
206 </ div >
207 </ div >
208 </ div >
209 </ body >
210 </ html >  
211

转载于:https://www.cnblogs.com/StarYe/archive/2009/08/11/1543593.html