تصف هذه المقالة طريقة JS لتحريك النص مع الماوس. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
هذا هو رمز ميزة الماوس البسيط للغاية. عند تحريك الماوس على صفحة ويب ، يتم نقل الماوس بسلسلة من النص بعد الماوس.
انسخ الرمز كما يلي: <html>
<head>
<type type = "text/css">
.spanstyle {
اللون: 000000 ؛ حجم الخط: 10pt ؛ الموقف: مطلق ؛ أعلى: -50px ؛ الرؤية: مرئية
}
</style>
<script>
var x ، y
var step = 18 // هذا هو الفاصل بين حرفين متجاورتين
علامة فار = 0
var message = "wulin.com www.vevb.com مرحبًا بك في زيارتك!" // ضع النص الذي تحتاجه لعرضه هنا
message = message.split ("") // تحلل السلسلة في صفيف
var xpos = new array () // قم بإنشاء صفيف لتسجيل السيرات x لكل موضع
لـ (i = 0 ؛ i <= message.length-1 ؛ i ++) {// تعيين قيمة أولية لكل عنصر أولاً
xpos [i] =-50
}
var ypos = new array () // قم بإنشاء صفيف لتسجيل إحداثيات Y لكل موضع
لـ (i = 0 ؛ i <= message.length-1 ؛ i ++) {
ypos [i] =-200
}
وظيفة movehandler (e) {// التعامل مع أحداث حركة الماوس
x = (document.layers)؟ e.pagex: document.body.scrollleft+event.clientx // توجيه الموضع الأفقي للماوس وفقًا للمتصفح
y = (document.layers)؟ e.pagey: document.body.scrolltop+event.clienty // قم بتسجيل الموضع الرأسي للماوس
Flag = 1 // لقد تغير موضع الماوس ويجب إعادة حسابه
}
وظيفة makenake () {
if (flag == 1 && document.all) {// إذا كان الأمر كذلك
لـ (i = message.length-1 ؛ i> = 1 ؛ i--) {// معالجة قوائم الانتظار
XPOS [i] = XPOS [I-1]+STEP // حرك كل بيانات إحداثيات شبكة واحدة وأضف تباعد الأحرف
ypos [i] = ypos [i-1]
}
XPOS [0] = x+step // اكتب بيانات جديدة في ذيل قائمة انتظار البيانات الإحداثي
ypos [0] = y
لـ (i = 0 ؛ i <message.length-1 ؛ i ++) {
var thisspan = eval ("span"+(i)+". style") // قم بإنشاء كائن التشغيل الحالي spanx.style
thisspan.posleft = xpos [i]
thisspan.postop = ypos [i]
}
}
آخر إذا (flag == 1 && document.layers) {// إذا كان NS
لـ (i = message.length-1 ؛ i> = 1 ؛ i--) {// معالجة قوائم الانتظار
XPOS [i] = XPOS [I-1]+STEP // حرك كل بيانات إحداثيات شبكة واحدة وأضف تباعد الأحرف
ypos [i] = ypos [i-1]
}
XPOS [0] = x+step // اكتب بيانات جديدة في ذيل قائمة انتظار البيانات الإحداثي
ypos [0] = y
لـ (i = 0 ؛ i <message.length-1 ؛ i ++) {// قم بتغيير إحداثيات الطبقة حيث توجد كل كلمة وفقًا لبيانات الصفيف
var thispan = eval ("document.span"+i) // إنشاء مستند كائن التشغيل الحالي.
thisspan.left = xpos [i]
thisspan.top = ypos [i]
}
}
var timer = setTimeout ("MakeNake ()" ، 30) // بعد 30 ميلي ثانية ، اضبط موضع كل حرف مرة أخرى وفقًا للموقف.
}
</script>
</head>
<body bgcolor = "ffffff" onload = "makenake ()">
<script>
<!- بداية جافا سكريبت-
// هنا ننشئ فترة كحاوية لكل كلمة
لـ (i = 0 ؛ i <= message.length-1 ؛ i ++) {
document.write ("<span id = 'span"+i+"' class = 'spanstyle>")
document.write (رسالة [i])
document.write ("</span>")
}
// حدد عملية التعامل مع أحداث حركة الماوس
if (document.layers) {
document.captureevents (event.mousemove) ؛
}
document.onmousemove = MoveHandler ؛
// - نهاية JavaScript - ->
</script>
</body>
<br> <b> هل هذا التأثير رائع جدًا؟ </b> </br>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.