บทความนี้อธิบายวิธีการของ JS+CSS เพื่อให้ตระหนักถึงการแสดงการไล่ระดับสีของชั้น Div ที่ทำให้เกิดเมาส์ แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> เลเยอร์ Div นำมาใช้โดย JS+CSS เพื่อรับรู้การแสดงการไล่ระดับสีของเมาส์ </title>
<style>
#เคล็ดลับ{
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 90px;
ความกว้าง: 0px;
ความสูง: 0px;
สี: #FFF;
ขนาดตัวอักษร: 12px;
พื้นหลังสี:#000;
ชายแดน: 1px Solid #DEF;
ตัวกรอง: อัลฟ่า (ความทึบ = 0);
ความทึบ: 0;
z-index: 999;
-
</style>
<script type = "text/javascript">
-
// กำหนดฟังก์ชั่นเพื่อ "รับโหนด DOM ที่ระบุ" เนื่องจากอัตราการใช้ซ้ำนั้นสูง
ฟังก์ชั่น $ (d) {return document.getElementById (d);}
// ควบคุม div เพื่อแสดงค่อยๆ
var i = 0;
ฟังก์ชั่น Change_show () {
var obj = $ ("เคล็ดลับ");
i = i+5; // ค่อยๆแสดงความเร็ว
obj.style.filter = "alpha (opacity =" + i + ")"; // ความโปร่งใสค่อยๆลดลง
obj.style.Opacity = i/100; // เข้ากันได้กับ Firefox
ถ้า (i> = 100) {
ClearInterval (S);
i = 0;
-
-
// ควบคุม DIV ค่อยๆหายไป
var j = 100;
ฟังก์ชั่น Change_Hidden () {
var obj = $ ("เคล็ดลับ");
J = J-5; // ค่อยๆหายไปความเร็ว
obj.style.filter = "alpha (opacity =" + j + ")"; // ความโปร่งใสค่อยๆเพิ่มขึ้น
obj.style.Opacity = j/100; // เข้ากันได้กับ Firefox
ถ้า (j <= 0) {
ClearInterval (H);
//obj.style.display="none ";
J = 100;
-
-
// การควบคุมการเปลี่ยนแปลง _show () พฤติกรรม
var s;
ฟังก์ชั่นแสดง (x) {
ถ้า (s) {clearInterval (s);}
$ ("เคล็ดลับ"). style.display = "block";
s = setInterval (change_show, 1);
-
// การควบคุมการเปลี่ยนแปลง _hidden () พฤติกรรม
ฟังก์ชั่นซ่อน (x) {
$ ("เคล็ดลับ"). innerhtml = "";
h = setInterval (change_hidden, 1);
-
-
</script>
</head>
<body>
<div id = "tip" style = "พื้นหลังสี: สีน้ำเงิน; ความกว้าง: 48%; ความสูง: 48%;" onMouseOver = "แสดง (นี่);" onMouseOut = "ซ่อน (นี่);">
</div>
<br />
<br> สไลด์ของเมาส์ที่นี่จอแสดงผลระดับชั้น Div Layer จะปรากฏขึ้น <br> <hr> รวบรวมบนอินเทอร์เน็ตเฉพาะเพื่อความสนใจและการสื่อสารการเรียนรู้และไม่ใช่เพื่อวัตถุประสงค์ทางการค้า </font> </p>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน