تصف هذه المقالة طريقة تنفيذ JS Drag-On وتأثير السحب طبقة مضخمة. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<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 {
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الموقف: قريب
الخلفية: #EEEEE ؛
الحدود: 1 بكسل Solid #F00 ؛
}
#div1 {
العرض: 15px ؛
الارتفاع: 15 بكسل ؛
الخلفية:#99cc00 ؛
الموقف: مطلق ؛
اليمين: 0px ؛
أسفل: 0px ؛
المؤشر: NW-RESIVE ؛
الفائض: مخفي.
حجم الخط: 12 بكسل ؛
محاذاة النص: المركز ؛
ارتفاع الخط: 15 بكسل ؛
اللون: #ffffff ؛
تعويم: صحيح.
Z-index: 3 ؛
}
#يمين{
العرض: 15px ؛
الارتفاع: 100 ٪
الخلفية:#F00 ؛
تعويم: صحيح.
الموقف: مطلق ؛
اليمين: 0 ؛
أعلى: 0 ؛
المؤشر: E-RESIVE ؛
الفائض: مخفي.
مرشح: ألفا (التعتيم: 0) ؛
العتامة: 0 ؛
Z-index: 1 ؛
}
#قاع{
العرض: 100 ٪ ؛
الارتفاع: 15 بكسل ؛
الخلفية:#F00 ؛
الموقف: مطلق ؛
اليسار: 0 ؛
أسفل: 0 ؛
المؤشر: N-RESIVE ؛
الفائض: مخفي.
مرشح: ألفا (التعتيم: 0) ؛
العتامة: 0 ؛
Z-index: 1 ؛
}
#div2 p {
الحشو: 10 بكسل ؛
Line-Leight: 24px ؛
حجم الخط: 13px ؛
استولى النص: 24 بكسل ؛
اللون:#996600 ؛
}
#Div2 H2 {
العرض: 100 ٪ ؛
الارتفاع: 25 بكسل ؛
رفع الخط: 25 بكسل ؛
حجم الخط: 14px ؛
الخلفية:#CC9900 ؛
اللون: #ffffff ؛
استولى النص: 15 بكسل ؛
المؤشر: تحرك.
الفائض: مخفي.
}
</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 ("bottom") ؛
var mousestart = {} ؛
var divstart = {} ؛
var rightStart = {} ؛
var bottomstart = {} ؛
// سحب اليمين
right.onmousedown = وظيفة (EV)
{
var oevent = ev || الحدث ؛
mousestart.x = oevent.clientx ؛
mousestart.y = oevent.clienty ؛
RightStart.x = right.offsetLeft ؛
إذا (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 || الحدث ؛
var l = oevent.clientx-mousestart.x+rightStart.x ؛
var w = l+odiv.offsetwidth ؛
إذا (w <odiv.offsetwidth)
{
w = odiv.offsetwidth ؛
}
آخر إذا (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 = وظيفة (EV)
{
var oevent = ev || الحدث ؛
mousestart.x = oevent.clientx ؛
mousestart.y = oevent.clienty ؛
BOTTOMSTART.Y = BOTTOM.OFFSETTOP ؛
إذا (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 || الحدث ؛
var t = oevent.clienty-mousestart.y+bottomstart.y ؛
var h = t+odiv.offsetheight ؛
إذا (h <odiv.offsetheight)
{
h = odiv.offsetheight ؛
}
وإلا
{
h = document.documentElement.clientheight-odiv2.offsettop-2 ؛
}
Odiv2.Style.Height = H+"PX" ؛
} ؛
وظيفة stopDrag2 ()
{
إذا (Bottom.ReleAsecapture)
{
Bottom.onmousemove = null ؛
bottom.onmouseup = null ؛
Bottom.RELEASECAPTURE () ؛
}
آخر
{
document.RemoveEventListener ("mousemove" ، doDrag2 ، true) ؛
document.RemoveEventListener ("Mouseup" ، stopDrag2 ، true) ؛
}
} ؛
// النبض إلى اليسار واليمين في نفس الوقت
odiv.onmousedown = وظيفة (EV)
{
var oevent = ev || الحدث ؛
mousestart.x = oevent.clientx ؛
mousestart.y = oevent.clienty ؛
divstart.x = odiv.offsetleft ؛
divstart.y = odiv.offsettop ؛
إذا (Odiv.setCapture)
{
odiv.onmousemove = doDrag ؛
odiv.onmouseup = stopDrag ؛
Odiv.SetCapture () ؛
}
آخر
{
document.addeventListener ("mousemove" ، doDrag ، true) ؛
document.adDeventListener ("Mouseup" ، stopDrag ، true) ؛
}
Zhezhao.style.display = 'block' ؛
} ؛
وظيفة doDrag (EV)
{
var oevent = ev || الحدث ؛
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 ؛
إذا (w <odiv.offsetwidth)
{
w = odiv.offsetwidth ؛
}
آخر إذا (w> document.documentElement.clientwidth-odiv2.offsetleft)
{
w = document.documentElement.clientwidth-odiv2.offsetleft-2 ؛
}
إذا (h <odiv.offsetheight)
{
h = odiv.offsetheight ؛
}
وإلا
{
h = document.documentElement.clientheight-odiv2.offsettop-2 ؛
}
ODIV2.STYLE.WIDTH = W+"PX" ؛
Odiv2.Style.Height = H+"PX" ؛
} ؛
وظيفة StopDrag ()
{
إذا (Odiv.ReleAsecapture)
{
odiv.onmousemove = null ؛
odiv.onmouseup = null ؛
Odiv.ReleasEcapture () ؛
}
آخر
{
document.RemoveEventListener ("mousemove" ، dodrag ، true) ؛
document.RemoveEventListener ("Mouseup" ، stopDrag ، true) ؛
}
Zhezhao.style.display = 'none' ؛
} ؛
// H2 السحب المثالي
H2.onmousedown = وظيفة (EV)
{
var oevent = ev || الحدث ؛
mousestart.x = oevent.clientx ؛
mousestart.y = oevent.clienty ؛
divstart.x = ODIV2.OffSetLeft ؛
divstart.y = odiv2.offsettop ؛
إذا (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 || الحدث ؛
var l = oevent.clientx-mousestart.x+divstart.x ؛
var t = oevent.clienty-mousestart.y+divstart.y ؛
إذا (l <0)
{
L = 0 ؛
}
آخر إذا (l> document.documentElement.clientwidth-odiv2.offsetWidth)
{
l = document.documentElement.clientwidth-odiv2.offsetWidth ؛
}
إذا (t <0)
{
t = 0 ؛
}
آخر إذا (t> document.documentElement.clientheight-odiv2
{
t = document.documentElement.clientheight-odiv2.offsetheight ؛
}
ODIV2.STYLE.LEFT = L+"PX" ؛
ODIV2.STYLE.TOP = T+"PX" ؛
} ؛
وظيفة stopDrag3 ()
{
إذا (H2.ReleAsecapture)
{
h2.onmousemove = فارغة ؛
h2.onmouseup = null ؛
H2.RELEASECAPTURE () ؛
}
آخر
{
document.RemoveEventListener ("mousemove" ، doDrag3 ، true) ؛
document.RemoveEventListener ("mouseup" ، stopDrag3 ، true) ؛
}
Zhezhao.style.display = 'none' ؛
}
} ؛
</script>
</head>
<body>
<div id = "div2">
<viv>
<h2> السحب المثالي </h2>
<p> جرب صفحة جافا سكريبت جيدة. بالإضافة إلى السحب ، يمكنك أيضًا سحب وتكبير ، ويتم توسيعه أو تقليله مثل نافذة Windows. فقط اضغط مع الاستمرار على الزاوية اليمنى السفلية للطبقة للتكبير أو خارجها بسهولة. يمكن للأصدقاء الذين يرغبون في استخدامه تغليف JS في الكود في الفصل ، وربما يكون من المعقول تقديمه من الخارج. '</p>
<div id = "right"> </viv>
<div id = "div1"> السحب </div>
<div id = "bottom"> </viv>
</div>
</div>
<div id = "Zhezhao"> </viv>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.