• Maison > interface Web > tutoriel CSS > le corps du texte

    Utilisez CSS pour implémenter les effets de clic de souris_CSS/HTML

    WBOY
    Libérer: 2016-05-16 12:11:19
    original
    1852 Les gens l'ont consulté

    Si vous savez bien appliquer CSS, votre page d’accueil sera magnifique. Ci-dessous, je vais vous présenter une image d'effet spécial d'un clic de souris réalisée avec CSS.

    1. Copiez le code suivant dans et entre votre page d'accueil.

    〈STYLE〉.shadow {
    FILTRE : ombre (couleur=bleu, direction=225)
    }
    .shadow1 {
    FILTRE : ombre(couleur=rouge, direction=225)
     }
     .shadow2 {
     FILTER : shadow(color=green, direction=225)
     }
     .div {
     CURSEUR : déplacer ; =135,force=10); LARGEUR : 800px
     }
     〈/STYLE〉

    Le filtre flou est appliqué ici.

    2. Insérez une image dans la page. Par exemple, j'ai inséré Utilisez CSS pour implémenter les effets de clic de souris_CSS/HTML

    Ajoutez 〈TD style="VERTICAL-ALIGN: top" width=314〉 à la ligne sous l'image que nous venons d'insérer.

    3. Après avoir défini les attributs de l'image, nous devons également appliquer du code de script Javascript, c'est-à-dire faire en sorte que l'image suive le mouvement de la souris avec quelques effets spéciaux.

    〈script language=Javascript〉
      !--
     var g_numlights=0;
     var blurbs= new Array("Les filtres dynamiques offrent désormais aux pages Web des capacités plus interactives pour répondre aux actions des utilisateurs. ", " Nous utilisons le filtre de la source lumineuse pour répondre au clic de l'utilisateur. Cliquer sur l'image peut déplacer la source lumineuse en capturant la position de la souris de l'utilisateur. ") ;
    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)%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. filters[0].movelight(1,x,y,5,1);
    if(g_numlights>1)
    {
    flttgt.filters[0].movelight( 2, x, y, 5 , 1) ;
    De cette façon, vous pouvez configurer un effet d'image plus personnalisé

    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!