Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov
Popup-блок вылетает после загрузки
Перемещайте блок, нажав и удерживая левую кнопку мыши на заголовке окна.
Исходный код этого примера:
<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>
<div id="showimage" style="position:absolute;width:250px;left:40px;top:200px;display:none;">
<table style="width:250px; background-color: #000080">
<tr>
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0" height="36px">
<tr>
<td id="dragbar" style="cursor:move; width:100px;" onMousedown="initializedrag(event)">
<div onSelectStart="return false">
<div onMouseover="dragswitch=1" style="color: #fff; font-size: 12px; font-weight: bold">
Перетаскиваемый блок
</div></div></td>
<td style="cursor:hand"><a href="" onClick="hidebox();return false" style="color:yellow">X</a></td>
</tr>
<tr>
<td width="100%" style="padding:4px; background-color: #fff" colspan="2">
<img src="../ann.jpg" style="width: 200px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
.
Прокомментировать/Отблагодарить