تصف هذه المقالة طريقة JS+CSS لتحقيق عرض التدرج لطبقة DIV التي تحفز الماوس. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> طبقة DIV التي تم تنفيذها بواسطة JS+CSS لاستشعار عرض التدرج من الماوس </title>
<style>
#نصيحة{
الموقف: مطلق ؛
اليسار: 90 بكسل ؛
العرض: 0px ؛
الارتفاع: 0px ؛
اللون: #fff ؛
حجم الخط: 12 بكسل ؛
خلفية اللون:#000 ؛
الحدود: 1px الصلبة #DEF ؛
مرشح: ألفا (عتامة = 0) ؛
العتامة: 0 ؛
Z-index: 999 ؛
}
</style>
<script type = "text/javaScript">
<!-
// حدد الوظيفة "الحصول على عقدة DOM المحددة" لأن معدل إعادة الاستخدام مرتفع
الدالة $ (d) {return document.getElementById (d) ؛}
// Control Div لعرض تدريجي
var i = 0 ؛
وظيفة التغيير_show () {
var obj = $ ("tip") ؛
i = i+5 ؛ // عرض السرعة تدريجيا
obj.style.filter = "alpha (opacity =" + i + ")" ؛ // تنخفض الشفافية تدريجيا
obj.style.Opacity = i/100 ؛ // متوافق مع Firefox
إذا (i> = 100) {
ClearInterval (s) ؛
أنا = 0 ؛
}
}
// Control Div يختفي تدريجيا
var J = 100 ؛
الوظيفة change_hidden () {
var obj = $ ("tip") ؛
J = J-5 ؛ // تختفي السرعة تدريجيا
OBJ.STYLE.Filter = "alpha (opacity =" + j + ")" ؛ // تزداد الشفافية تدريجيا
obj.style.Opacity = j/100 ؛ // متوافق مع Firefox
if (j <= 0) {
Clearinterval (H) ؛
//OBJ.Style.Display="none "؛
J = 100 ؛
}
}
// control change_show () السلوك
var s ؛
وظيفة عرض (x) {
if (s) {clearinterval (s) ؛}
$ ("tip"). style.display = "block" ؛
s = setInterval (change_show ، 1) ؛
}
// control change_hidden () السلوك
وظيفة مخفية (x) {
$ ("tip"). innerhtml = "" ؛
h = setInterval (change_hidden ، 1) ؛
}
//->
</script>
</head>
<body>
<div id = "tip" style = "background-color: Blue ؛ Width: 48 ٪ ؛ الارتفاع: 48 ٪ ؛" onMouseover = "show (this) ؛" onMouseout = "Hidden (this) ؛">
</div>
<br />
<br> تنزلق الماوس هنا ، يتم عرض شاشة التدرج Div Layer <br> <hr> التي يتم جمعها على الإنترنت ، فقط من أجل الاهتمام والتواصل التعليمي ، وليس للأغراض التجارية. </font> </p>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.