В этой статье описывается метод реализации JS Drag-On и усиленный эффект перетаскивания слоя. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<Title> JS реализует эффект перетаскивания слоя, а также может перетаскивать и увеличить </title>
<style>
*{маржа: 0; падки: 0;}
#zhezhao {
Ширина: 100%;
высота: 100%;
Фон:#F00;
Фильтр: альфа (непрозрачность: 0);
непрозрачность: 0;
Z-Index: 9999;
позиция: абсолютно;
Верх: 0;
слева: 0;
дисплей: нет;
}
#div2 {
Ширина: 200px;
Высота: 200px;
позиция: относительно;
Фон: #eeeeeee;
Граница: 1PX SOLID #F00;
}
#div1 {
Ширина: 15px;
высота: 15px;
Фон:#99CC00;
позиция: абсолютно;
Справа: 0px;
Внизу: 0px;
Курсор: NW-Resize;
переполнение: скрыто;
размер шрифта: 12px;
Текст-альбом: Центр;
высота линии: 15px;
Цвет: #ffffff;
Поплавок: верно;
z-index: 3;
}
#верно{
Ширина: 15px;
высота: 100%;
Фон:#F00;
Поплавок: верно;
позиция: абсолютно;
Справа: 0;
Верх: 0;
Курсор: электронный резир;
переполнение: скрыто;
Фильтр: альфа (непрозрачность: 0);
непрозрачность: 0;
z-index: 1;
}
#нижний{
Ширина: 100%;
высота: 15px;
Фон:#F00;
позиция: абсолютно;
слева: 0;
Внизу: 0;
курсор: n-resize;
переполнение: скрыто;
Фильтр: альфа (непрозрачность: 0);
непрозрачность: 0;
z-index: 1;
}
#div2 p {
Заполнение: 10px;
высота линии: 24px;
размер шрифта: 13px;
текстовый: 24px;
Цвет:#996600;
}
#div2 h2 {
Ширина: 100%;
Высота: 25px;
высота линии: 25px;
размер шрифта: 14px;
Фон:#CC9900;
Цвет: #ffffff;
текстовый: 15px;
курсор: двигаться;
переполнение: скрыто;
}
</style>
<script type = "text/javascript">
window.onload = function ()
{
var Odiv = document.getElementById ("div1");
var Odiv2 = document.getElementById ("div2");
var zhezhao = document.getElementByid ("Zhezhao");
var h2 = Odiv2.getElementsByTagName ("H2") [0];
var right = document.getElementbyId ("right");
var bottom = document.getElementbyId ("внизу");
var mousestart = {};
var divstart = {};
var RightStart = {};
var BottomStart = {};
// потянуть направо
right.onmousedown = function (EV)
{
var oevent = ev || event;
mousestart.x = oevent.clientx;
mousestart.y = oevent.clienty;
rightstart.x = right.offsetleft;
if (right.setCapture)
{
right.onmousemove = dodrag1;
right.onmouseup = stopdrag1;
right.setCapture ();
}
еще
{
Document.AddeventListener ("MouseMove", Dodrag1, True);
Document.AddeventListener («MouseUp», StopDrag1, True);
}
};
Функция dodrag1 (EV)
{
var oevent = ev || event;
var l = oevent.clientx-mousestart.x+rightstart.x;
var W = L+Odiv.OffSetWidth;
if (w <odiv.offsetwidth)
{
W = ODIV.OffSetWidth;
}
else if (w> document.documentelement.clientwidth-odiv2.offsetleft)
{
w = document.documentelement.clientwidth-odiv2.offsetleft-2;
}
Odiv2.style.width = w+"px";
};
функция stopdrag1 ()
{
if (right.releasecapture)
{
right.onmousemove = null;
right.onmouseup = null;
right.releasecapture ();
}
еще
{
Document.RemoveEventListener ("MouseMove", Dodrag1, True);
Document.RemoveEventListener ("MouseUp", Stopdrag1, True);
}
};
// потянуть
Bottom.onmouseDown = function (EV)
{
var oevent = ev || event;
mousestart.x = oevent.clientx;
mousestart.y = oevent.clienty;
BottomStart.Y = Bottom.OffSetTop;
if (Bottom.SetCapture)
{
Bottom.onmouseMove = dodrag2;
Bottom.onmouseup = stopdrag2;
Bottom.SetCapture ();
}
еще
{
Document.AddeventListener ("MouseMove", Dodrag2, True);
Document.AddeventListener («MouseUp», StopDrag2, True);
}
};
Функция dodrag2 (EV)
{
var oevent = ev || event;
var t = oevent.clienty-mousestart.y+bottomstart.y;
var h = t+odiv.offsetheight;
if (h <Odiv.offsetheight)
{
h = Odiv.OffSetheight;
}
else if (h> document.documentelement.clientheight-odiv2.offsettop)
{
h = document.documentelement.clientHeight-odiv2.OffSetTop-2;
}
Odiv2.style.height = h+"px";
};
функция stopdrag2 ()
{
if (Bottom.ReleaseCapture)
{
Bottom.onmouseMove = null;
Bottom.onmouseup = null;
Bottom.ReleaseCapture ();
}
еще
{
Document.RemoveEventListener ("MouseMove", Dodrag2, True);
Document.RemoveEventListener ("MouseUp", StopDrag2, True);
}
};
// пульс влево и вправо одновременно
Odiv.onmousedown = function (EV)
{
var oevent = ev || event;
mousestart.x = oevent.clientx;
mousestart.y = oevent.clienty;
divstart.x = Odiv.offsetleft;
divstart.y = Odiv.offsettop;
if (Odiv.SetCapture)
{
Odiv.onmouseMove = dodrag;
Odiv.onmouseup = stopdrag;
Odiv.SetCapture ();
}
еще
{
Document.AddeventListener ("MouseMove", Dodrag, True);
document.addeventlistener ("MouseUp", StopRAG, True);
}
zhezhao.style.display = 'block';
};
Функция Dodrag (EV)
{
var oevent = ev || event;
var l = oevent.clientx-mousestart.x+divstart.x;
var t = oevent.clienty-mousestart.y+divstart.y;
var W = L+Odiv.OffSetWidth;
var h = t+odiv.offsetheight;
if (w <odiv.offsetwidth)
{
W = ODIV.OffSetWidth;
}
else if (w> document.documentelement.clientwidth-odiv2.offsetleft)
{
w = document.documentelement.clientwidth-odiv2.offsetleft-2;
}
if (h <Odiv.offsetheight)
{
h = Odiv.OffSetheight;
}
else if (h> document.documentelement.clientheight-odiv2.offsettop)
{
h = document.documentelement.clientHeight-odiv2.OffSetTop-2;
}
Odiv2.style.width = w+"px";
Odiv2.style.height = h+"px";
};
функция stopdrag ()
{
if (Odiv.ReleaseCapture)
{
Odiv.onmouseMove = null;
Odiv.onmouseup = null;
ODIV.RELEASECAPTURE ();
}
еще
{
Document.RemoveEventListener ("MouseMove", Dodrag, True);
Document.RemoveEventListener ("MouseUp", StopRAG, True);
}
zhezhao.style.display = 'none';
};
// H2 Perfect Crag
h2.onmousedown = function (EV)
{
var oevent = ev || event;
mousestart.x = oevent.clientx;
mousestart.y = oevent.clienty;
divstart.x = Odiv2.offsetleft;
divstart.y = Odiv2.offsettop;
if (h2.setCapture)
{
h2.onmouseMove = dodrag3;
h2.onmouseup = stopdrag3;
h2.setCapture ();
}
еще
{
document.addeventlistener ("MouseMove", Dodrag3, True);
document.addeventListener ("MouseUp", StopDrag3, True);
}
zhezhao.style.display = 'block';
};
Функция dodrag3 (EV)
{
var oevent = ev || event;
var l = oevent.clientx-mousestart.x+divstart.x;
var t = oevent.clienty-mousestart.y+divstart.y;
if (l <0)
{
l = 0;
}
else if (l> document.documentelement.clientwidth-odiv2.offsetwidth)
{
l = document.documentelement.clientwidth-odiv2.offsetwidth;
}
if (t <0)
{
t = 0;
}
else if (t> document.documentelement.clientheight-odiv2.offsetheight)
{
t = document.documentelement.clientHeight-odiv2.offsetheight;
}
Odiv2.style.left = l+"px";
Odiv2.style.top = t+"px";
};
функция stopdrag3 ()
{
if (h2.releasecapture)
{
h2.onmouseMove = null;
h2.onmouseup = null;
H2.ReleaseCapture ();
}
еще
{
Document.RemoveEventListener ("MouseMove", Dodrag3, True);
Document.RemoveEventListener ("MouseUp", StopDrag3, True);
}
zhezhao.style.display = 'none';
}
};
</script>
</head>
<тело>
<div id = "div2">
<div>
<h2> Идеальное перетаскивание </h2>
<p> Получите хорошее перетаскивание веб -страницы JavaScript. В дополнение к перетаскиванию, вы также можете перетаскивать и увеличивать, и он увеличивается или уменьшается, как окно Windows. Просто нажмите и удерживайте нижний правый угол слоя, чтобы легко или выходить. Друзья, которые хотят использовать его, могут инкапсулировать JS в код в класс, и, вероятно, более разумно представить его извне. '</p>
<div id = "right"> </div>
<div id = "div1"> перетаскивать </div>
<div id = "внизу"> </div>
</div>
</div>
<div id = "Zhezhao"> </div>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.