บทความนี้อธิบายวิธีการใช้การแสดงภาพการตรวจจับเมาส์โดย JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! 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>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> เอฟเฟกต์การแสดงภาพการตรวจจับเมาส์ </title>
<!-[ถ้า lte ie 6]>
<ภาษาสคริปต์ = "JavaScript">
var w3cdom = (document.createElement () && document.getElementSbyTagname ());
window.onload = pinballeffect;
ฟังก์ชั่น pinballeffect ()
-
ถ้า (! w3cdom) กลับมา;
var allelements = document.getElementsByTagname ('*');
var Originalbackgrounds = new Array ();
สำหรับ (var i = 0; i <allelements.length; i ++)
-
if (allelements [i] .classname.indexof ('HereReffect')> = 0)
-
อัลลีลีเมนต์ [i] .onmouseover = MouseGoesOver;
อัลลีลีเมนต์ [i] .onmouseout = MouseGoesout;
-
-
-
ฟังก์ชั่น mousegoesover ()
-
OriginalClassNamEstring = this.className;
this.className += "lay-on";
-
ฟังก์ชั่น mousegoesout ()
-
this.className = OriginalClassNamestring;
-
pinballeffect ();
</script>
<! [endif]->
<style type = "text/css">
ร่างกาย {
ความเป็นมา: #FFF;
แบบอักษร: เล็ก/1.5 "安体", Simsun, Serif;
_font-size: Medium;
-
img {
ชายแดน: ไม่มี;
-
ul,
หลี่
H5 {
รายการสไตล์: ไม่มีอยู่ข้างใน;
มาร์จิ้น: 0;
Padding: 0;
-
.RECOMM {
ความเป็นมา:#999;
ชายแดน: 1px Solid #666;
ความกว้าง: 600px;
ความสูง: 170px;
ล้น: ซ่อน;
Padding: 10px;
มาร์จิ้น: 0 อัตโนมัติ;
ตำแหน่ง: ญาติ;
-
.RECOMM UL {
ชายแดน: 1px Solid #FFFF;
ชายแดนซ้าย: ไม่มี;
ความสูง: 168px;
ความกว้าง: 599px;
ล้น: ซ่อน;
*ตำแหน่ง: สัมบูรณ์; /* แก้ปัญหาที่ล้น: ซ่อนไม่สามารถซ่อนองค์ประกอบได้อย่างถูกต้องใน IE*/
-
.RECOMM LI {
ลอย: ซ้าย;
ตำแหน่ง: ญาติ;
มาร์จิ้น-ขวา: -179px;
ความสูง: 100%;
ล้น: ซ่อน;
พื้นที่สีขาว: NowRap;
TEXT-ALIGN: CENTER;
-
.RECOMM LI IMG {
แสดง: บล็อก;
ชายแดนซ้าย: 1px Solid #FFFF;
ความกว้าง: 248px;
ความสูง: 168px;
-
.RECOMM LI H5 {
ตำแหน่ง: สัมบูรณ์;
ด้านล่าง: 0;
ซ้าย: 0;
ความสูง: 20px;
ความกว้าง: 239px;
ความสูงของสาย: 20px;
ความเป็นมา: url (../ images/1_211621.png) ไม่มีการทำซ้ำ;
แสดง: ไม่มี;
TEXT-ALIGING: ถูกต้อง;
Padding-Right: 10px;
ขนาดตัวอักษร: 1EM;
Font-Weight: ปกติ;
-
.RECOMM LI: HOVER, .RECOMM .LAY-ON {
ความกว้าง: 249px;
มาร์จิ้น-ขวา: 0;
-
.RECOMM LI: HOVER H5, .RECOMM .LAY-ON H5 {
แสดง: บล็อก;
-
</style>
</head>
<body>
<div>
<ul>
<li> <a href = "/"> <img src = "/images/m01.jpg"/> </a>
<H5> ใบไม้สีแดงผ่านความรักโดย <a href = "/"> รหัสบ้าน </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m02.jpg"/> </a>
<H5> ดอกไม้ป่าบานสะพรั่งโดย <a href = "/"> ภาพยนตร์ Shanshan และโทรทัศน์ออนไลน์ </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m03.jpg"/> </a>
<H5> อดีตเป็นเหมือนชาโดย <a href = "/"> รหัสบ้าน </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m04.jpg"/> </a>
<H5> ยกดอกไม้บานโดย <a href = "/"> ภาพยนตร์และโทรทัศน์สีสันสดใส </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m05.jpg"/> </a>
<H5> โรสรักโดย <a href = "/"> รหัสบ้าน </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m09.jpg"/> </a>
<H5> เดซี่ตัวน้อยโดย <a href = "/"> ภาพยนตร์และโทรทัศน์ Shanshan </a> 2010.09.23 </h5>
</li>
</ul>
</div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน