Baru-baru ini saya melakukan event gambar masuk dan keluar mouse. Ada beberapa metode yang bisa Anda coba.
Pertama, ada dua cara untuk mengubah resolusi, resolusi menggerakkan mouse ke dalam gambar dan keluar gambar berbeda.
Metode satu
Copy kode kodenya sebagai berikut:
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>Daftar gambar: Gerakkan mouse masuk/keluar untuk mengubah transparansi gambar</title>
<gaya>
ul,li{margin:0;padding:0;tipe-gaya-daftar:tidak ada;}
#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.img saat ini{opacity:1;filter:alpha(opacity=100);}
</gaya>
<skrip>
jendela.onload = fungsi ()
{
var oLi = dokumen.getElementsByTagName("li");
untuk (var i = 0; i < oLi.panjang; i++)
{
oLi[i].onmouseover = fungsi ()
{
this.className = "saat ini"
};
oLi[i].onmouseout = fungsi ()
{
ini.namakelas = ""
}
}
}
</skrip></head>
<tubuh>
<ul id="daftarimg">
<li><img src="/jscss/demoimg/201203/kitesky_com_car1.jpg" /></li>
<li><img src="/jscss/demoimg/201203/kitesky_com_car2.jpg" /></li>
</ul>
</tubuh>
</html>
Metode dua
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
fungsi makevisible(saat ini,yang mana){
jika (yang==0)
cur.filters.alpha.opacity=100
kalau tidak
cur.filters.alpha.opacity=20
}
</skrip>
<tubuh>
<img src="../../Content/themes/login/image/JianKong.png" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible( ini,0)"/>
</tubuh>
Cara lainnya adalah dengan menggerakkan mouse masuk dan keluar gambar untuk mengubah ukuran gambar.
Tambahkan saja beberapa kode pada tag <body>. Saat mouse bergerak ke arah gambar, gambar akan menjadi lebih besar di kanan atas, dan ketika mouse menjauh dari gambar, gambar akan kembali ke ukuran aslinya.
Copy kode kodenya sebagai berikut:
<img src="../../Content/themes/login/image/Jiben.png" onmouseover="this.width=230" onmouseout="this.width=200"/>