Popup-блок вылетает после загрузки.

Перемещайте блок нажав и удерживая левую кнопку мыши на заголовке окна.

Перетаскиваемый блок X

Исходный код этого примера:

<script type="text/javascript">
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
var dragswitch=0
var nsx
var nsy
var nstemp
//
function drag_dropns(name){
	if (!ns4) return
	temp=eval(name)
	temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
	temp.onmousedown=gons
	temp.onmousemove=dragns
	temp.onmouseup=stopns
}
function gons(e){
	temp.captureEvents(Event.MOUSEMOVE)
	nsx=e.x
	nsy=e.y
}
function dragns(e){
	if (dragswitch==1){
	   temp.moveBy(e.x-nsx,e.y-nsy)
	   return false
	}
}
function stopns(){
	temp.releaseEvents(Event.MOUSEMOVE)
}
function drag_drop(e){
if (ie4&&dragapproved){
	crossobj.style.left=tempx+event.clientX-offsetx
	crossobj.style.top=tempy+event.clientY-offsety
	return false
   }
else if (ns6&&dragapproved){
	crossobj.style.left=tempx+e.clientX-offsetx+"px"
	crossobj.style.top=tempy+e.clientY-offsety+"px"
	return false
	}
}
function initializedrag(e){
        if(to_)clearTimeout(to_);
	crossobj=ns6? document.getElementById("showimage") :
		      document.all.showimage
	var firedobj=ns6? e.target : event.srcElement
	var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? 
			"documentElement" : "body"
	while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
		firedobj=ns6? firedobj.parentNode : firedobj.parentElement
	}
	if (firedobj.id=="dragbar"){
	   offsetx=ie4? event.clientX : e.clientX
	   offsety=ie4? event.clientY : e.clientY
	   tempx=parseInt(crossobj.style.left)
	   tempy=parseInt(crossobj.style.top)
	   dragapproved=true
	   document.onmousemove=drag_drop
	}
}
document.onmouseup=new Function("dragapproved=false")
function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
	crossobj.style.visibility="hidden"
else if (ns4)
	document.showimage.visibility="hide"
}
//
var VelX_, VelY_; 
var targetx_, targety_; 
var oldty_, to_; 
var dltmv_ = 8.485362749257531; 
//
function moveobj( ) {
  var _xlen_ = 477;
  var _ylen_ = 360;
  var _px1_ = window.pageXOffset ? window.pageXOffset : document.body.scrollLeft;
  var _py1_ = window.pageYOffset ? window.pageYOffset : document.body.scrollTop;
  var _px2_ = _px1_ + ( window.innerWidth ? window.innerWidth : document.body.clientWidth );
  var _py2_ = _py1_ + ( window.innerHeight ? window.innerHeight : screen.availHeight-window.screenTop );//document.body.clientHeight-800 );
  //var _py2_ = _py1_ + ( window.innerHeight ? window.innerHeight : screen.availHeight );//document.body.clientHeight-800 );
  var _dx_, _dy_;targety_ += VelY_ * 0.02 + 0.14220000000000002;  //document.body.scrollHeight:document.body.offsetHeight
  if ( oldty_ + _ylen_ > _py2_ && VelY_ >= 0 )  {
	targety_ = _py2_ - _ylen_;
	VelY_ = Math.sqrt ( 42660 );
	oldty_ = targety_ - 1;  }
  if ( oldty_ + _ylen_ == _py2_ && targety_ + _ylen_ >= _py2_ )  
	{targety_ = _py2_ - _ylen_;
	VelX_ = 0;  
	}
  else if ( targety_ + _ylen_ >= _py2_ && oldty_ + _ylen_ < _py2_ )
	{VelY_ *= -0.3333333333333333 * 0.89;
	VelX_ *= 0.3333333333333333;
	targety_ = _py2_ - _ylen_;
  }else  {
	VelY_ += 14.22;  }
  if ( VelY_ < 0 && targety_ <= _py1_ && oldty_ > _py1_ )
	{VelY_ *= -0.8;
	 VelX_ *= 0.9;
	}
   oldty_ = targety_;
   targetx_ += VelX_ * 0.02;
   if ( _xlen_ < _px2_ - _px1_ )  
   	if ( VelX_ < 0 && targetx_ < _px1_ )
   		VelX_ *= -0.8;
else if ( VelX_ > 0 && targetx_ + _xlen_ > _px2_ )
	{  VelX_ *= -0.8;  targetx_ = _px2_ - _xlen_ - 1;
}
if (ie4){
	crossobj.style.top  = targety_;
	crossobj.style.left = targetx_;
	}
else if (ns6){
	crossobj.style.top  = targety_+"px";
	crossobj.style.left = targetx_+"px";
	}
to_=setTimeout ( "moveobj()", 20 );
} 
//
function StartUpJ_ ( _tX_, _tY_ ) {
   trgx_ = _tX_;   
   trgy_ = _tY_;   
   targetx_ = _tX_;   
   targety_ = _tY_;
   var _dltx_ = 0, _dlty_ = 0;
   _dltx_ = ( ( window.innerWidth ) ? window.innerWidth : document.body.clientWidth ) - _tX_;
   _dlty_ = -_tY_ -360;if ( _dltx_ != 0 && _dlty_ != 0 )  
   if ( Math.abs ( _dltx_ ) < Math.abs ( _dlty_ ) )
	   _dlty_ = _dlty_ / Math.abs ( _dlty_ ) * Math.abs ( _dltx_ );
   else_dltx_ = _dltx_ / Math.abs ( _dltx_ ) * Math.abs ( _dlty_ );   
   targetx_ += _dltx_ + ( window.pageXOffset ? window.pageXOffset : document.body.scrollLeft );   
   targety_ += _dlty_ + ( window.pageYOffset ? window.pageYOffset : document.body.scrollTop );   
   oldty_ = targety_;   
   VelX_ = -424.26813746287655;   
   VelY_ = 0;   
   crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4){
	crossobj.style.top  = targety_;
	crossobj.style.left = targetx_;
	}
else if (ns6){
	crossobj.style.top  = targety_+"px";
	crossobj.style.left = targetx_+"px";
	}
   crossobj.style.display = "block";
   moveobj();
} 
//
to_=setTimeout( "StartUpJ_( 474, 230 );", 100 ); 
</script>

<h1>Popup-блок вылетает после загрузки.</h1>
<p>Перемещайте блок нажав и удерживая левую кнопку мыши на заголовке окна.

<div id="showimage" style="position:absolute;width:250px;left:40px;top:200px;display:none;">
<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
  <tr>
    <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0" height="36px">
      <tr>
        <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)">
        <ilayer width="100%" onSelectStart="return false">
        <layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0">
        <font face="Verdana" color="#FFFFFF">
          <strong><small>Перетаскиваемый блок</small></strong>
        </font>
        </layer></ilayer></td>
        <td style="cursor:hand"><a href="#" onClick="hidebox();return false" style="color:yellow">X</a></td>
      </tr>
      <tr>
        <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
        <img src="../ann.jpg" width=200>
        </td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div>
</body>
</html>
Скопировать в буфер

© Copyright 2008-2012 by KDG