บทความนี้อธิบายวิธีการท่องชั้นหน้ากากใน JS Mouse แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
รหัสหน้า HTML:
คัดลอกรหัสดังนี้: <ul>
<li> <a data-title = "Science" href = "#"> <i style = "background-image: url (images/xiaozhan/main_ojls_1aa6000200891260.jpg)"
</i> <pan> วิทยาศาสตร์ </span> </a> </li>
<li> <a data-title = "animation" href = "#"> <i style = "background-image: url (images/xiaozhan/main_nh8v_2e310001ebd1118e.jpg)"
</i> <span> อนิเมะ </span> </a> </li>
<li> <a data-title = "Life" href = "#"> <i style = "background-image: url (images/xiaozhan/main_otnr_43a60000050a118c.jpg)"
</i> <pan> ชีวิต </span> </a> </li>
<li> <a data-title = "ภาพประกอบ" href = "#"> <i style = "background-image: url (images/xiaozhan/main_ud3z_2e510002074f118e.jpg)"
</i> <pan> ภาพประกอบ </span> </a> </li>
<li> <a data-title = "music" href = "#"> <i style = "background-image: url (images/xiaozhan/main_krfk_6323000018bd125d.jpg)"
</i> <pan> เพลง </span> </a> </li>
<li> <a data-title = "natural" href = "#"> <i style = "background-image: url (images/xiaozhan/main_uabs_764f0001ff601190.jpg)"
</i> <span> ธรรมชาติ </span> </a> </li>
</ul>
รหัส JS:
คัดลอกรหัสดังนี้: <script type = "text/javascript">
$ (function () {
// เลเยอร์หน้ากากความสูงจะเปลี่ยนไปเมื่อเมาส์ขยับขึ้นและชัดเจนขึ้น
var $ site_li = $ (". site-tag li");
$ site_li.hover (function () {
ดัชนี var = $ site_li.index (นี่);
$ (นี่) .css ("ความสูง", "90"). ค้นหา (". แท็ก-tit"). css ("top", "30"). css ("color", "#ffff");
// รับดัชนีขององค์ประกอบคลิกในปัจจุบันในองค์ประกอบ LI ทั้งหมด
// การแจ้งเตือน (ดัชนี+1);
$ (นี่) .prev (). CSS ("ความสูง", "30");
$ (นี่) .next (). CSS ("ความสูง", "30");
}, การทำงาน () {
$ site_li.css ("ความสูง", "50");
-
-
</script>
รหัส CSS:
คัดลอกรหัสดังนี้: ul li {list-style: none;}
.Site-tag {width: 200px; ล้น: ซ่อน; z-index: 5;}
.Site-tag li {ตำแหน่ง: ญาติ; ความกว้าง: 200px; ความสูง: 50px; ขอบด้านล่าง: 1px; ล้น: ซ่อน;
การเปลี่ยนแปลง: ความสูง 0.5S ง่ายดาย; -webkit-transition: ความสูง 0.5S ง่ายดาย;
-MOZ-TRANSITION: ความสูง 0.5S ง่ายดาย; -O-Transition: ความสูง 0.5S EASE;}
.Site-tag li a {color: #666; ขนาดตัวอักษร: 16px; Font-Weight: Bold; Line-Height: 50px;}
.Site-tag li i {display: block; ความสูง: 90px; ตำแหน่งพื้นหลัง: ศูนย์กลาง;
ความทึบ: 0.3; ตัวกรอง: อัลฟ่า (ความทึบ = 3); /*ตั้งค่าความโปร่งใส*/
-webkit-transition: ความทึบ 0.5 ความสะดวก; -
-webkit-filter: สีเทา (60%); -
-
.Site-tag li: โฮเวอร์ฉัน {ความทึบ: 0.9; -webkit-filter: สีเทา (0%); การเปลี่ยนแปลง: ความทึบ 0.5S ง่ายดาย;}
.tag-tit {display: block; ความสูง: 100px; ความกว้าง: 700px; สี:#666; ขนาดตัวอักษร: 14px;}
.Site-tag li .tag-tit {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 10px; Text-Shadow: 1px 1px 1px RGB (0,0,0,0.1);}
A: hover .tag-tit {text-shadow: 1px 1px 1px rgb (0,0,0,0.5);}
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน