فيما يلي تأثير خاص JavaScript Compans ، وهو التأثير على النحو التالي:
لا يمكن أن يظهر تأثير الصورة أدناه فحسب ، بل يمكن أيضًا تدوير الشكل مع الماوس. هذا مجرد مثال بسيط وغير معدّل. بناءً على هذا المثال ، يمكن أن يجعل المغازلة أكثر متعة. الرجال المتردد ، هل يمكنك نشر مثل هذه صفحة الويب إلى LOLI الصغيرة؟ عظيم.
انشر الكود:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> إدراج العنوان هنا </title>
<type type = "text/css">
جسم{
الحدود: 1 بكسل صلب أحمر.
العرض: 1000px ؛
الارتفاع: 1000px ؛
الهامش: 0px Auto ؛
الحشو: 0px ؛
اللون: أخضر.
}
/*
اسحب الكائن من دفق المستند ، باستخدام خصائص مثل اليسار ، اليمين ، الأعلى ، القاع ، إلخ.
الأقرب إلى كائن الوالدين الأكثر وضعا لتحديد المواقع المطلقة. إذا لم يكن مثل هذا الكائن الوالد موجودًا ،
بواسطة جسم الجسم. ويتم تعريف سلسلة من السمة Z-Index
*/
ديف {
الموقف: مطلق ؛
}
</style>
<script type = "text/javaScript">
// لماذا يجب أن أستخدم Onload؟ لأنه عندما أقوم بتهيئة DIV على مدار الساعة في رمز JavaScript ، وجدت صفحة التصحيح أنه لا يوجد تنفيذ
// في وقت لاحق اكتشفت السبب ، تم تحليل رمز HTML من الأمام إلى الخلف. عند تحليل رمز JavaScript أولاً ، انتقل إلى الجسم
// عند إضافة العقد الفرعية ، لا يمكن العثور على الجسم الذي لم يتم حله. لذلك يجب عليك أولاً تحليل الجسم. هناك طريقتان ، واحدة هي
طريقة الكتابة لـ // ، يمكن أن تكون هناك طريقة أخرى لإضافة طريقة Onload إلى علامة الجسم.
window.onload = function () {
init () ؛
} ؛
// تحديد مجموعة DIV لتخزين 12 divs
// بسبب العلاقة بين المواضع الـ 12 DIV ، حدد أولاً النقطة والنصف القطر لحساب موضع Div
var divs = [] ؛
var LoveBaby = ["I" ، "Love" ، "You" ، "You" ، "Bao" ، "Bei" ، "Love" ، "Love" ، "Me" ، "Wan" ، "Wan" ، "Wan" ، "Wan" "wan" wan "" wan "" wan "" wa " N "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "wan" wan "wan" "wan" wan "wan" wan "wan" wan
var cx = 300 ؛
var cy = 300 ؛ // -----------------------------------------------------------------------------------------------------------------------
var r = 150 ؛
var divcenternode ؛ // يجب التحكم في موضع نقطة الوسط ويجب تعيين المتغيرات العالمية
// تحديد وظيفة تهيئة
وظيفة init () {
// قم بإنشاء DIV في وضع نقطة الوسط (يمكنك كتابة كائن الخطوبة)
DivCenternode = document.createElement ("div") ؛
divcenternode.innerhtml = "tingting ، الزواج مني!" ؛
document.body.appendChild (divcenternode) ؛
divcenternode.style.left = (cx-50)+"px" ؛
divcenternode.style.top = (cy-30)+"px" ؛
// قم بإنشاء 12 divs لتشكيل ساعة محظورة ووضعها في الجسم
لـ (var x = 1 ؛ x <= 12 ؛ x ++) {
// إنشاء div
var divnode = document.createElement ("div") ؛
divnode.innerhtml = lovebaby [x-1] ؛
// لا يلزم الحصول على كائن الجسم مثل الكائنات الأخرى ، وتم تغليف مكتبة JS.
document.body.appendchild (divnode) ؛
divs.push (divnode) ؛
}
// في كل مرة تبدأ فيها StartClock () في إعادة وضع عنصر DIV
/*
في الواقع ، لتحقيق تأثير الدوران ، من الضروري التعويض بشكل مستمر ، أو
إعادة وضع ، ولكن لا يمكنك التحكم في المدة التي تستغرقها لبدء الوظيفة ، بعد ذلك
في هذا الوقت ، يوفر كائن النافذة طريقة.
*/
startClock () ؛
}
// إزاحة ديف
var offset = 0 ؛ // الإزاحة درجة
// تحديد وظيفة لوضع وتدوير الموضع بشكل منفصل
وظيفة startClock () {
لـ (var x = 1 ؛ x <= 12 ؛ x ++) {
var div = divs [x-1] ؛
// درجة كل رقم
var dushu = 30*x+الإزاحة ؛
// قيمة الزاوية* Math.PI /180 = قيمة الشعاع
var divleft = cx+r*math.sin (dushu*math.pi/180) ؛
div.style.left = divleft+"px" ؛
var divtop = cy-r*math.cos (dushu*math.pi/180) ؛
div.style.top = divtop+"px" ؛
}
إزاحة+= 50 ؛
// فاصل زمني معين ، رد الاتصال على هذه الوظيفة
// يتم حساب التعبير بعد قيمة المللي ثانية المحددة. المعلمة الأولى هي التعبير ، المعلمة الثانية هي الوقت
setTimeout (StartClock ، 80) ؛ // طريقة كائن النافذة
}
// حدد هذه الساعة إلى مواقع مختلفة مع تحرك الماوس
وظيفة clockmove (الحدث) {
cx = event.clientx ؛ // الإحداثيات x لموضع الماوس
cy = event.clienty ؛ // الإحداثي y لموضع الماوس
divcenternode.style.left = (cx-50)+"px" ؛
divcenternode.style.top = (cy-30)+"px" ؛
}
</script>
</head>
<body onMousemove = "clockmove (event)">
<!-
1. عرض 12 رقمًا في دائرة
1/إنشاء 12 divs ، تعيين القيم 1-12 على التوالي
2/تحديد موقع 12 divs وشكل دائرة.
->
</body>
</html>
أردت أصلاً أن أقوم بشاشة على مدار الساعة يمكن أن تدور وتشغيلها. لذا فإن التسمية في الكود مرتبطة بالساعة ، لذلك لن أكون مرتبكًا يا عزيزي. المبتدئون في JavaScript ، أشعر أن JavaScript قوي للغاية.