إنها عطلة نهاية الأسبوع ، لقد حان الوقت لتلخيص الغد. أشعر أنني تعلمت بعض الأشياء ، لكنني أشعر أنني لم أتعلم الكثير. دعنا نحللها غدًا. دعونا نلقي نظرة على المشكلات التي أريد تحليلها اليوم.
الجميع على دراية بهذه الصورة:
― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ―
اليوم سوف نحلل وننشئه. دعونا أولاً نقدم خصائص هذا المربع المنبثق:
* مرتبط دائمًا بحدود الصفحة
* لا تغير الموقف مع ارتفاع الصفحة وتسقط
* عندما يمر الماوس ، ستظهر معلومات مفصلة ، وعندما يغادر ، سيعود إلى حالته الأصلية.
وبهذه الطريقة ، يمكننا التفكير تقريبًا في العديد من الوظائف الممكنة: تحديد المواقع المطلقة للبريد ؛ مراقبة وطرق الفأر الممر ؛ سيتم استخدام هذه بالتأكيد ، ولكن ما هي الاستخدامات الأخرى إلى جانب هذه ، وكيف يتم تنفيذها؟
1. تنفيذ جميع حالة الواجهة المعروضة
اكتب رمز HTML أولاً
نسخة الكود كما يلي:
<span style = "font-size: 12px ؛"> <div id = "shareleft">
<viv>
<p> <a href = "#"> tip </a> </p>
</div>
<p id = "maineMsg" onMouseover = "showtip ()">
مشاركة إلى
</p>
</viv> </span>
ثم تشفير نمط CSS
نسخة الكود كما يلي:
<span style = "font-size: 12px ؛">*{margin: 0 ؛ padding: 0 ؛}
#shareleft {الموضع: ثابت ؛ خلفية اللون: أصفر ؛ أعلى: 50 بكسل ؛ العرض: 300px ؛ الارتفاع: 600px ؛ اليمين: 0px ؛}
#mainmsg {color: #fff ؛ الموضع: absolute ؛ المؤشر: مؤشر ؛ محاذاة النص: المركز ؛ الخلفية اللون: أحمر ؛ الأعلى: 60px ؛ العرض: 100px ؛ الارتفاع: 400px ؛ الحشوة: 20px 0 0 10px ؛ الهامش-اليسار: -100px ؛ الحدود: 50px 0 0 05px ؛ }
.list {float: right ؛ background-color: #fff ؛ width: 280px ؛ الارتفاع: 580px ؛ الهامش: 10px 10px 10px 10px ؛} </span>
دعنا نحلل النقاط الرئيسية هنا: Post: الوضع الثابت جيد جدًا ؛ ب. اليمين: 0px ، سيتم شرح التطبيق المحدد لهذا بالتفصيل لاحقًا ، لكنه أيضًا مهم جدًا هنا ؛ 3.
هاها ، هذا هو أكبر صندوق منبثق لهذا العام. دعنا نستمر في الحديث عن التأثير المنبثق لـ JS
2. إخفاء الجزء التفصيلي ، مما دفع إلى أن الجزء يتسرب إلى الخارج
هذا بسيط نسبيا. لتعديله ، ما عليك سوى تغيير القيمة الصحيحة لـ ShareLeft ، يمين = -300px ، وهو عرض Div
3. JS لتحقيق تأثير منبثق
ليست هذه هي المرة الأولى التي استخدمنا فيها تأثير هذا المؤقت. لقد طبقناها عندما تنفذ JS تأثير الآلة الكاتبة. هنا قمنا فقط بتغيير كائن التوقيت.
نسخة الكود كما يلي:
<span style = "font-size: 12px ؛"> <script type = "text/javaScript">
var timer = null ؛
var count = 0 ؛
tip var = function (الموضع ، الهدف ، السرعة) {
ClearInterval (مؤقت) ؛
Timer = setInterval (function () {
if (count> position.offsetWidth) {
ClearInterval (مؤقت) ؛
}آخر{
position.style.right+= window.count+"px" ؛
window.count ++ ؛
} ؛
}، سرعة)؛
} ؛
وظيفة showtip () {
var position = document.getElementById ("ShareLeft") ؛
نصيحة (موضع ، document.body.clientwidth ، 1000) ؛
} ؛
</script> </span>
أهم النقاط التي يجب الانتباه إليها في هذا الرمز هي: OffsetWidth ، .style.right ، إلخ. لن أتحدث عن هذا الآن. سأقدمها على وجه التحديد. دعنا نستخدمه مثل هذا أولاً ، فقط تعرف على المعنى.
بعد أن تفهم هذا بدقة ، سيتم تحقيق التأثير الآن ، حتى تتمكن من تجربته أيضًا.