Gunakan CSS untuk melaksanakan kesan klik tetikus_CSS/HTML

Jika anda boleh menggunakan CSS dengan baik, halaman utama anda akan kelihatan cantik. Di bawah saya akan memperkenalkan kepada anda imej kesan khas klik tetikus yang dibuat dengan CSS.

1. Salin kod berikut ke dalam dan antara halaman utama anda.

〈GAYA〉.bayang {
PENAPIS: bayang(warna=biru, arah=225)
}
.bayang1 {
PENAPIS: bayang(warna=merah, arah=225)
　}
　.bayang2 {
　PENAPIS: bayang(warna=hijau, arah=225)
　}
　.div {
　KURSOR: gerakkan, arah =135，kekuatan=10); LEBAR: 800px
　}
　〈/GAYA〉

Penapis kabur digunakan di sini.

2. Masukkan gambar ke dalam halaman Contohnya, saya memasukkan

Tambahkan 〈TD style="VERTICAL-ALIGN: top" width=314〉 pada baris di bawah gambar yang baru kita masukkan.

3. Selepas menetapkan atribut imej, kita juga perlu menggunakan kod skrip Javascript, iaitu untuk menjadikan imej mengikut pergerakan tetikus dengan beberapa kesan khas.

〈script language=Javascript〉
　　!--
　var g_numlights=0;
　var blurbs= new Array("Penapis dinamik semasa memberikan halaman web prestasi yang lebih interaktif untuk bertindak balas kepada Tindakan pengguna . "," Kami menggunakan penapis sumber cahaya untuk membalas klik pada imej boleh menggerakkan sumber cahaya dengan menangkap kedudukan tetikus pengguna ") ;
window.onload=setlights;
dokumen. onclick=keyhandler;
flttgt.onmousemove=mousehandler;
fungsi setlights(){
flttgt.filters[0].clear(); ,5,100,100,225,225,0,60,15);
jika (g_numlights>0){
flttgt.filters[ 0].addcone(400, 170, 5, 100, 100, 60, 225, 15);
　if (g_numlights>1){
flttgt.filters[0].addcone(320, 330, 5, 100, 100, 0, 225, 225, 60, 15.); ;
holder.innerHTML=blurbs[g_numlights];
setlights();
}
function mousehandler()
{
x=(window.event.x -80);
y=(window.event.y-80);
flttgt.filters[0].movelight(1,x,y,5,1);
if(g_numlights>0 ){
flttgt.filters[0].movelight(1,x,y,5,1);
if(g_numlights>1)
{
flttgt.filters[0].movelight( 2, x, y, 5, 1);
　}
　}
　}
　〈/skrip〉

Dengan cara ini, anda boleh menyediakan kesan gambar yang lebih diperibadikan