رمز CSS
نسخة الكود كما يلي:
<type type = "text/css">
* {
الهامش: 0px ؛
الحشو: 0px ؛
Font-Family: "Micsoft Yahei" ، "Microsoft Yahei" ؛
حجم الخط: 15 بكسل ؛
}
ديف {
العرض: 50 بكسل ؛
الارتفاع: 50 بكسل ؛
الخلفية: #F00 ؛
الحدود الحدودية: 5px ؛
-Moz-Border-Radius: 5px ؛
-webkit-border-Radius: 5px ؛
المؤشر: مؤشر.
الموقف: مطلق ؛
أعلى: 60px ؛
اليسار: 30 بكسل ؛
}
مدخل{
الموقف: مطلق ؛
أعلى: 10 بكسل ؛
اليسار: 10 بكسل ؛
الحشو: 3px ؛
المؤشر: مؤشر.
}
</style>
رمز HTML
نسخة الكود كما يلي:
<body>
<type type = "button" value = "إرجاع في الطريق الأصلي"/>
<viv> </viv>
</body>
رمز JavaScript
نسخة الكود كما يلي:
<script type = "text/javaScript">
// 1. ابدأ بالنقر فوق Div مع الماوس كمشغل.
// 2. عند النقر فوق الماوس للتحرك ، قم بإعداد حدث حركة الماوس لحقن البيانات في الصفيف (تحرك الإحداثيات)
// 3. تنتهي مع الابتعاد عن الماوس بعيدًا عن Div
// 4. انقر فوق الزر "الإرجاع الأصلي" لاجتياز الصفيف (نقل الإحداثيات) وادفع حركة الإحداثيات لـ DIV في الصفيف لتحقيق وظيفة "الإرجاع".
window.onload = function () {
var odiv = document.getElementsByTagName ("div") [0] ؛
var obtn = document.getElementSbyTagName ("input") [0] ؛
var time = null ، arrtop = [] ، arrleft = [] ؛
odiv.onmousedown = function (ev) {
var event = ev || window.event ؛
// احصل على إحداثيات الماوس في Div
var disx = event.clientx-odiv.offsetleft ؛
var disy = event.clienty-div.offsettop ؛
arrtop = [60] ؛
arrleft = [30] ؛
document.onmousemove = function (ev) {
var event = ev || window.event ؛
// احصل على موضع الماوس بعد السحب
var l = event.clientx ؛
var t = event.clienty ؛
// احفظ موضع السحب في المصفوفة ، واستخدم موضع الماوس الذي تم سحبه لطرح موضع الماوس على الكائن ، وهو موضع الكائن الذي تم سحبه.
arrleft.push (l-disx) ؛
arrtop.push (t-disy) ؛
Odiv.Style.Left = l-disx +"px" ؛
Odiv.Style.top = t-disy +"px" ؛
} ؛
document.onmouseup = function () {
document.onmousemove = null ؛
document.onmouseup = null ؛
} ؛
العودة كاذبة
}
// هو جوهر العائد الأصلي هو تسجيل الإحداثيات عند التحرك ، ثم إعادة ترتيب الصفيف ، وتعيين مؤقت لتعيين قيم واسعة في الصفيف إلى الكائن.
Obtn.onclick = function () {
arrtop.reverse () ؛ // إعادة ترتيب
arrleft.reverse () ؛ // إعادة ترتيب
var i = 0 ؛
Obtn.time = setInterval (function () {
odiv.style.top = arrtop [i]+"px" ؛
Odiv.Style.Left = arrleft [i]+"px" ؛
i ++ ؛
if (i == arrtop.length) {
ClearInterval (Obtn.time) ؛
arrtop = [] ؛
arrleft = [] ؛
}
} ، 20) ؛
}
}
</script>