• Heim > Web-Frontend > CSS-Tutorial > Verwenden Sie CSS, um Mausklickeffekte zu implementieren_CSS/HTML

    Verwenden Sie CSS, um Mausklickeffekte zu implementieren_CSS/HTML

    WBOY
    Freigeben: 2016-05-16 12:11:19
    Original
    1921 Leute haben es durchsucht

    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 Verwenden Sie CSS, um Mausklickeffekte zu implementieren_CSS/HTML

    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

    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage