Verwenden Sie CSS, um Mausklickeffekte zu implementieren_CSS/HTML

Wenn Sie CSS gut anwenden können, wird Ihre Homepage schön aussehen. Im Folgenden stelle ich Ihnen ein mit CSS erstelltes Mausklick-Spezialeffektbild vor.

1. Kopieren Sie den folgenden Code in und zwischen Ihrer Homepage.

〈STYLE〉.shadow {
FILTER: Schatten(Farbe=Blau, Richtung=225)
}
.shadow1 {
FILTER: Schatten(Farbe=Rot, Richtung=225)
　} =135，Stärke=10); WIDTH: 800px
　}
　〈/STYLE〉

Der Unschärfefilter wird hier angewendet.

2. Fügen Sie ein Bild in die Seite ein. Ich habe beispielsweise

Fügen Sie 〈TD style="VERTICAL-ALIGN: top" width=314〉 zur Zeile unter dem Bild hinzu, das wir gerade eingefügt haben.

3. Nach dem Festlegen der Bildattribute müssen wir auch Javascript-Skriptcode anwenden, damit das Bild der Mausbewegung mit einigen Spezialeffekten folgt.

〈script language=Javascript〉

　　!--

　var g_numlights=0;

　var Blurbs= new Array("Jetzt geben dynamische Filter Webseiten mehr interaktive Möglichkeiten, um auf Benutzeraktionen zu reagieren. ", „Wir verwenden den Lichtquellenfilter, um auf den Klick des Benutzers zu reagieren. Durch Klicken auf das Bild kann die Lichtquelle verschoben werden, indem die Mausposition des Benutzers erfasst wird.“) ;

window.onload=setlights;

document.onclick=keyhandler ;
flttgt.onmousemove=mousehandler;
function setlights(){
flttgt.filters[0].clear();
flttgt.filters[0].addcone(0,0,5,100,100,225,225, 0,60,15);
if (g_numlights>0){
flttgt.filters[ 0].addcone(400, 170, 5, 100, 100, 225, 0, 0, 160, 15);
　if (g_numlights>1){
flttgt.filters[0].addcone(320, 330, 5, 100, 100, 0, 225, 225, 60, 15); 1)%4;
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. filter[0].movelight(1,x,y,5,1);
if(g_numlights>1)
{
flttgt.filters[0].movelight( 2, x, y, 5 , 1);
　}
　}
　}
　〈/script〉

Auf diese Weise können Sie einen persönlicheren Bildeffekt einrichten