เมื่อเร็วๆ นี้ ฉันกำลังเลื่อนเมาส์เข้าและออกกิจกรรมรูปภาพ มีหลายวิธีที่คุณสามารถลองได้
ประการแรก มีสองวิธีในการเปลี่ยนความละเอียด: ความละเอียดในการเลื่อนเมาส์เข้าไปในรูปภาพและการย้ายออกจากรูปภาพจะแตกต่างกัน
วิธีที่หนึ่ง
คัดลอกรหัสรหัสดังต่อไปนี้:
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>รายการรูปภาพ: เลื่อนเมาส์เข้า/ออกเพื่อเปลี่ยนความโปร่งใสของรูปภาพ</title>
<สไตล์>
ul,li{ระยะขอบ:0;padding:0;list-style-type:none;}
#imgList{width:700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}
#imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}
#imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}
#imgList li.current img{ความทึบ:1;ตัวกรอง:อัลฟา(ความทึบ=100);}
</สไตล์>
<สคริปต์>
window.onload = ฟังก์ชั่น ()
-
var oLi = document.getElementsByTagName("li");
สำหรับ (var i = 0; i < oLi.length; i++)
-
oLi[i].onmouseover = ฟังก์ชั่น ()
-
this.className = "ปัจจุบัน"
-
oLi[i].onmouseout = ฟังก์ชัน ()
-
this.className = ""
-
-
-
</สคริปต์></หัว>
<ร่างกาย>
<ul id="imgList">
<li><img src="/jscss/demoimg/201203/kitesky_com_car1.jpg" /></li>
<li><img src="/jscss/demoimg/201203/kitesky_com_car2.jpg" /></li>
</ul>
</ร่างกาย>
</html>
วิธีที่สอง
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
ฟังก์ชั่นทำให้มองเห็นได้ (cur ซึ่ง) {
ถ้า (ซึ่ง==0)
cur.filters.alpha.opacity=100
อื่น
cur.filters.alpha.opacity=20
-
</สคริปต์>
<ร่างกาย>
<img src="../../Content/themes/login/image/JianKong.png" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible( นี้,0)"/>
</ร่างกาย>
อีกวิธีหนึ่งคือการเลื่อนเมาส์เข้าและออกจากรูปภาพเพื่อเปลี่ยนขนาดของรูปภาพ
เพียงเพิ่มโค้ดบางส่วนลงในแท็ก <body> เมื่อเมาส์เลื่อนไปที่รูปภาพ รูปภาพจะใหญ่ขึ้นทางด้านขวาบน และเมื่อเมาส์เคลื่อนออกจากรูปภาพ รูปภาพก็จะกลับสู่ขนาดดั้งเดิม
คัดลอกรหัสรหัสดังต่อไปนี้:
<img src="../../Content/themes/login/image/Jiben.png" onmouseover="this.width=230" onmouseout="this.width=200"/>