تصف هذه المقالة طريقة تنفيذ تأثير السحب طبقة السحب لوحدة IgoogleDivDrag بواسطة JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! 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 = utf-8" />
<title> JS ينفذ تأثير طبقة السحب لوحدة السحب Igoogle Div </title>
<type type = "text/css">
*{الهامش: 0px ؛ الحشو: 0px ؛}
الجسم {الموضع: النسبي ؛ العرض: 780 بكسل ؛ الارتفاع: 800 بكسل ؛ الحدود: 1 بكسل صلب أحمر}
.drag {العرض: 200px ؛ الارتفاع: 100px ؛ الحدود: 1 بكسل الصلبة #000 ؛ الهامش: 20 بكسل ؛ الخلفية: #ffff}
.Drag H1 {margin: 0px ؛ الحشو: 0px ؛ حجم الخط: 12 بكسل ؛ الارتفاع: 18 بكسل ؛ ارتفاع الخط: 18 بكسل ؛ الخلفية:#e0e7f3 ؛ استولى النص: 20 بكسل ؛ المؤشر: نقل ؛}
.center {margin: 200px ؛ الحدود: 3 بكسل الصلب الأحمر}
</style>
<script type = "text/javaScript"> </script>
</head>
<body>
<viv>
<h1> <strong> www.baidu.com </strong> </h1>
</div>
<viv>
<h1> www.163.com </h1>
</div>
<viv>
<h1> <strong> www.vevb.com </strong> </h1>
</div>
<viv> <h1> Test 2 </h1> </viv>
<viv> <h1> اختبار 3 </h1> </viv>
<viv> <h1> اختبار 4 </h1> </viv>
<viv> <h1> اختبار 5 </h1> </viv>
</body>
</html>
<script type = "text/javaScript">
/*
المؤلف: popper.w
الإصدار: v2.0
*/
var dragzindexnumber = 0 ؛
وظيفة السحب (obj) {
var ox ، oy ، ex ، xy ، tag = 0 ، mask = 0 ؛
if (tag == 0) {
obj.onmousedown = وظيفة (e)
{
if (mask == 1) {return ؛ }
obj.style.zindex = dragzindexnumber ++ ؛
transp (OBJ ، "ابدأ")
علامة = 1 ؛
var e = e || window.event ؛
ex = getEventOffset (e) .offsetx ؛
ey = geteventoffset (e) .Offsety ؛
ox = parseint (obj.offsetleft) ؛
oy = parseint (obj.offsettop) ؛
tempdiv = document.createElement ("div") ؛
مع (tempdiv.style)
{
العرض = obj.offsetWidth+"px" ؛
الارتفاع = obj.offsetheight+"px" ؛
الحدود = "1px منقط أحمر" ؛
الموضع = "المطلق" ؛
left = obj.offsetleft+"px" ؛
TOP = OBJ.OFFSETTOP+"PX" ؛
Zindex = 999 ؛
}
document.body.appendchild (tempdiv) ؛
this.ele = tempdiv ؛
fdragstart (tempdiv) ؛
document.body.onmousemove = function (e) {
إذا (علامة == 1)
{
var e = e || window.event ؛
tempdiv.style.left = parseint (e.clientx) -ex+"px" ؛
tempdiv.style.top = parseint (e.clienty) -ey+"px" ؛
}
آخر {if (! tempdiv == null) tempdiv.parentnode.removechild (tempdiv)}
}
tempdiv.onmouseup = دالة (هـ)
{
var e = e || window.event ؛
fdragend (tempdiv) ؛
obj.style.position = "المطلق" ؛
فيلم (OBJ ، Parseint (E.Clientx) -ex-19 ، Parseint (E.Clienty) -ey-20) ؛
tempdiv.parentnode.removechild (tempdiv) ؛
علامة = 0 ؛
}
}
}
}
Function Movie (O ، L ، T) {
var a = 1 ؛
قناع = 1 ؛
var ol = parseint (O.OffSetLeft) ؛
var ot = parseint (o.offsettop) ؛
var itimer = setInterval (function () {
إذا (A == 10)
{
transp (o ، "end") ؛
قناع = 0 ؛
ClearInterval (itimer) ؛
}
O.Style.Left = ol+a*(l-ol)/10+"px" ؛
O.Style.top = ot+a*(t-ot)/10+"px" ؛
A ++ ؛
} ، 20) ؛
}
وظيفة fcanclebubble (E)
{
var e = window.event || ه ؛
if (e.preventDefault) e.PreventDefault () ؛
آخر e.ReturnValue = false ؛
}
وظيفة transp (o ، الوضع) {
if (mode == "start") {
if (document.all) {
O.Style.Filter = "alpha (عتامة = 50)" ؛
}آخر{
O.Style.Opacity = 0.5 ؛
}
}
آخر {
if (document.all) {
O.Style.filter = "alpha (عتامة = 100)" ؛
}آخر{
O.Style.Opacity = 1 ؛
}
}
}
وظيفة getOffset (EVT)
{
var target = evt.target ؛
if (target.offsetLeft == undefined)
{
Target = target.parentNode ؛
}
var pagecoord = getPageCoord (Target) ؛
var EventCoord =
{
x: window.pagexoffset + evt.clientx ،
y: window.pageyoffset + evt.clienty
} ؛
var offset =
{
OffsetX: EventCoord.x - Pagecoord.x ،
Offsety: EventCoord.y - Pagecoord.y
} ؛
إرجاع إزاحة ؛
}
وظيفة getPageCoord (عنصر)
{
var coord = {x: 0 ، y: 0} ؛
بينما (العنصر)
{
coord.x += element.OffSetLeft ؛
CONSTRINGE.Y += element.offsettop ؛
element = element.OffSetParent ؛
}
منسق العودة
}
وظيفة getEventoffset (EVT)
{
var msg = "" ؛
إذا (evt.offsetx == غير محدد)
{
var evtoffsets = getOffset (evt) ؛
msg = {offsetx: evtoffsets.offsetx ، OffSety: evtoffsets.offsety} ؛
}
آخر
{
msg = {offsetx: evt.offsetx ، OffSety: evt.offsety} ؛
}
إرجاع MSG ؛
}
وظيفة fdragstart (xele)
{
التبديل (FCKBRS ())
{
الحالة 3:
window.getSelection (). removeallranges () ؛
استراحة؛
تقصير:
xele.setCapture () ؛
استراحة؛
}
}
وظيفة fdragend (xele)
{
التبديل (FCKBRS ())
{
الحالة 3:
window.getSelection (). removeallranges () ؛
استراحة؛
تقصير:
xele.releasecapture () ؛
استراحة؛
}
}
وظيفة fckbrs ()
{
التبديل (navigator.appname)
{
حالة "الأوبرا": العودة 2 ؛
حالة "netscape": العودة 3 ؛
الافتراضي: إرجاع 1 ؛
}
}
var element = document.getElementSbyTagName ("div") ؛
لـ (var i = 0 ؛ i <element.length ؛ i ++) {
if (element [i] .classname == "drag") {
السحب (العنصر [i])}
}
</script>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.