English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Emplacement actuel
  2. Page d'àccueil
  3. Notes d'é experienце
  4. Texte principal

Discuter des fonctions d'effet de jQuery

jQuery offre de nombreux effets, par exemple les effets d'éclaircissement et d'étanchissement :<html>

 <head>
    <style>
      #box{width:200px;height:200px;fond:red;opacité:1;}
    </style>
  </head>
  <body>
    <div id="box">
    </div>
    <input type="button" value="Masquer/Afficher"id="bt1">/><br>/>
    <input type="button" value="Entrée"id="bt2">/><br>/>
    <input type="button" value="Dispara"id="bt3">/><br>/>
    <input type="button" value="Entrée"id="bt4">/><br>/>
    <input type="button" value="Sortie"id="bt5">/><br>/>
    <input type="button" value="Transparente"id="bt6">/><br>/>
    <input type="button" value="Entrée/Sortie"id="bt7">/><br>/>
    <input type="button" value="Dispara entrée/Dispara’"id="bt7">/><br>/>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $(function(){
        $("#bt1").click(function(){
              $("#box").toggle()1000)
              }),
        $("#bt2").click(function(){
              $("#box").slideDown()1500)
              }),
        $("#bt3").click(function(){
              $("#box").slideUp()1500)
              }),
        $("#bt4").click(function(){
              $("#box").fadeIn()1000)
              }),
        $("#bt5").click(function(){
              $("#box").fadeOut()1000)
              }),
        $("#bt6").click(function(){
              $("#box").fadeTo()1500,0.4)
              }),
        $("#bt7").click(function(){
              $("#box").fadeToggle()1000)
              }),
        $("#bt8").click(function(){
              $("box").slideToggle()1500)
              )
        )
  </script>
</html>

jQuery peut également implémenter un effet de curseur défilant, par exemple : <html>

<head>
    <style>
      #box{width:300px;height:50px;border:2px barré violet;survol caché;ligne-height:50px;marge:0 auto;couleur:red;font-taille:30px;}
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script src="jquery-1.7.1.min.js"></script>
  <script>
    $(function(){
        str="Je suis un Chinois"
        $("#box").html(str)
        setInterval(go,300)
          function go(){
            str=str.substr(1)+str.substr(0,1)
            $("#box").html(str)
            }  
      )
  </script>
</html>

jQuery peut être utilisé pour implémenter une fonction de suppression, par exemple : <html>

<head>
    <style>
      #box{
        largeur:400px;
        height:200px;
        border:1px solide noir;
        }
    </style>
  </head>
  <body>
    <div id="box">
        <p id="a">Premièrea</p>
        <p>Deuxième</p>
        <p id="a">Troisièmea</p>
        <p>Quatrième</p>
    </div>
    <button id="del">Supprimer</button>
    <button id="cle">Effacer</button>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $(function(){
        $("#del").click()
            function(){}
              $("p").remove("#a")
              });
        $("#cle").click()
            function(){}
              $("#box").empty()
              });
      )
  </script>
</html>

jQuery ще effectuer une implémentation de la fonction de sélection des cours, par exemple : <html>

<head>
<title></title>
<style>
li{
  list-style:none;
}
#you{
  position:absolute;
  left:300px;
  top:10px;
}
ul{
  position:absolute;
  left:150px;
  top:10px;
}
</style>
<script src="jquery-1.6.js"></script>
<script>
  $(function(){
    $("button:first").click(function(){
      $("#zuo>option:selected").prependTo($("#you"));
      //$("#you").append($("#zuo>option:selected");
    )
    1)
      $("#you>option:selected").appendTo($("#zuo"));
      //$("#you").append($("#zuo>option:selected");
    )
    2)
      $("#zuo>option").appendTo($("#you"));
    )
    3)
      $("#you>option").appendTo($("#zuo"));
    )
    4)
       //$("#zuo>option:first").before($("#zuo>option:selected"))
      $("#zuo>option:selected").prependTo($("#zuo"));
    )
    5)
      // $("#zuo>option:last").after($("#zuo>option:selected"))
      $("#zuo>option:selected").appendTo($("#zuo"));
    )
    6)
     $("#zuo>option:selected").prev().before($("#zuo>option:selected")) ;  
    )
    7)
     $("#zuo>option:selected").next().after($("#zuo>option:selected")) ;  
    )
  )
</script>
</head>
<body>
<select size="10" id="zuo" style="width:100px">
  <option>Anglais professionnel</option>
  <option>Mathématiques supérieures</option>
  <option>Littérature universitaire</option>
  <option>Physique universitaire</option>
  <option>Fondamentaux de l'informatique</option>
  <option>Conception de page web de base</option>
  <option>Conception de programme en langage C</option>
  <option>Structure de données</option>
  <option>Design UI</option>
  <option>Conception de script de produit</option>
  <option>Amélioration de script de produit</option>
  <option>Pratique de script de produit</option>
</select>
<ul>
<li><button>Sélectionner</button></li>
<li><button>Déselectionner</button></li>
<li><button>Sélectionner tous</button></li>
<li><button>Retirer tous</button></li>
<li><button>Placer en haut</button></li>
<li><button>Placer en bas</button></li>
<li><button>Monter</button></li>
<li><button>Descendre</button></li>
</ul>
<select size="10" id="you" style="width:100px">
</select>
</body>
</html>

jQuery peut également réaliser la fonction de boîte déroulante :<!DOCTYPE html>

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $(".flip").click(function(){
  $(".panel").slideDown("slow");
 });
});
</script>
<style type="text"}/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - le site de tutoriels en ligne de technologies Web leader</p>
<p>Sur W3School，vous pouvez trouver tous les tutoriels de construction de site Web dont vous avez besoin.</p>
</div>
<p class="flip">Cliquez ici</p>
</body>
</html>
jQuery peut réaliser des effets d'animation simples :<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({left:'250px'});
 });
});
</script> 
</head>
<body>
<button>Démarrer l'animation</button>
<p>Par défaut, la position de tous les éléments HTML est statique et ils ne peuvent pas être déplacés. Si vous souhaitez modifier la position, n'oubliez pas de définir d'abord la propriété CSS position de l'élément sur relative, fixed ou absolute.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery peut réaliser une fonctionnalité de démarrage et d'arrêt d'animation:<html>
  <head>
    <style>
      #box{width:100px;height:100px;background:violet;position:absolute;border-radius:50%;top:50px;}
    </style>
  </head>
  <body>
    <div id="box"></div>
    <button id="bt">Démarrer</button>
    <button id="bt1">Arrêter</button>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $(function(){
        $("#bt").click(function(){
              $("div").animate({left:"800px",top:"300px",width:"500px",height:"500px"},3000)
              }),
        $("#bt1").click(function(){
              $("div").stop();
              )      
        )
  </script>
</html>

jQuery peut également réaliser des fonctionnalités de publicité en rotation vers le haut des images:<html>

<head>
    <style>
      #box{width:600px;height:300px;overflow:hidden;border:1px solid #000;margin:0 auto;}
      ul{list-style:none;}
      img{width:600px;height:300px;}
      *{padding:0;margin:0;}
    </style>
  </head>
  <body>
    <div id="box">
      <ul id="pic">
        <li><img src="1.png"></li>
        <li><img src="2.png"></li>
        <li><img src="3.png"></li>
        <li><img src="4.png"></li>
        <li><img src="1.png"></li>
      </ul>
    </div>
  </body>
  <script src="jquery-1.7.1.min.js"></script>
  <script>
    $(function(){
        m=0;
        p=setInterval(go,100)
        function go(){
            m+=20;
            $("#pic").css("margin-top",-m+"px")
            if(m>=1200){m=0}
            }
      )
  </script>
</html>

jQuery peut réaliser deux effets de déroulement et de fermeture en un:<!DOCTYPE html>

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
 {
 $("button").click(function(){
  $("#p1").css("color","red").slideUp(2000).slideDown(2000);
 });
});
</script>
</head>
<body>
<p id="p1">Plaisir jQuery !</p>
<button>Cliquez ici</button>
</body>
</html>

Voici tout ce que je vous ai partagé, merci.

Voici tout le contenu que je partage avec vous concernant cette fonction d'effet jQuery. J'espère que cela vous servira de référence et que vous continuerez à soutenir le tutoriel de cri de soutien.

Tutoriel de base
Vous pourriez aussi aimer