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

  1. Posizione attuale
  2. Pagina principale
  3. Note di esperienza
  4. Testo principale

Breve introduzione alle funzioni di effetto in jQuery

jQuery offre molti effetti, come l'effetto ingresso/uscita progressiva:<html>

 <head>
    <style>
      #box{larghezza:200px;altezza:200px;sfondo:red;opacita:1;}
    </style>
  </head>
  <body>
    <div id="box">
    </div>
    <input type="button" value="Nascondere/Mostrare" id="bt1"><br/><br/>
    <input type="button" value="Ingresso progressivo" id="bt2"><br/><br/>
    <input type="button" value="Uscita progressiva" id="bt3"><br/><br/>
    <input type="button" value="Entrata scorrevole" id="bt4"><br/><br/>
    <input type="button" value="Uscita scorrevole" id="bt5"><br/><br/>
    <input type="button" value="Trasparente" id="bt6"><br/><br/>
    <input type="button" value="Entrata/Uscita scorrevole" id="bt7"><br/><br/>
    <input type="button" value="Ingresso/Uscita progressiva" id="bt7"><br/><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(() => {
              $("#box").slideUp(1500)
              }),
        $("#bt4").click(() => {
              $("#box").fadeIn(1000)
              }),
        $("#bt5").click(() => {
              $("#box").fadeOut(1000)
              }),
        $("#bt6").click(() => {
              $("#box").fadeTo(1500,0.4)
              }),
        $("#bt7").click(() => {
              $("#box").fadeToggle(1000)
              }),
        $("#bt8").click(() => {
              $("box").slideToggle(1500)
              });
        });
  </script>
</html>

jQuery può anche implementare l'effetto di scorrimento delle didascalie, ad esempio nell'esempio seguente:<html>

<head>
    <style>
      #box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;}
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script src="jquery-1.7.1.min.js"></script>
  <script>
    $(function(){
        str="Sono cinese"
        $("#box").html(str)
        setInterval(go,300)
          function go(){
            str=str.substr(1)+str.substr(0,1)
            $("#box").html(str)
            }  
      });
  </script>
</html>

jQuery può essere utilizzato per implementare la funzione di eliminazione, ad esempio:<html>

<head>
    <style>
      #box{
        width:400px;
        height:200px;
        border:1px solid black;
        }
    </style>
  </head>
  <body>
    <div id="box">
        <p id="a">Primoa</p>
        <p>Secondo</p>
        <p id="a">Terzoa</p>
        <p>Quarto</p>
    </div>
    <button id="del">Elimina</button>
    <button id="cle">Pulisci</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 può implementare la funzione di selezione delle lezioni, ad esempio:<html>

<head>
<title></title>
<style>
li{
  list-style:none;
}
#you{
  posizione:assoluta;
  left:300px;
  top:10px;
}
ul{
  posizione:assoluta;
  left:150px;
  top:10px;
}
</style>
<script src="jquery-1.6.js"></script>
<script>
  $(function(){
    $("pulsante:first").clicca(function(){
      $("#zuo>opzione:selected").aggiungiAllaPrima($("#you"));
      //$("#you").aggiungiAllaFine($("#zuo>opzione:selected");
    });
    $("pulsante:eq(1)").clicca(function(){
      $("#you>opzione:selected").aggiungiAllaFine($("#zuo"));
      //$("#you").aggiungiAllaFine($("#zuo>opzione:selected");
    });
    $("pulsante:eq(2)").clicca(function(){
      $("#zuo>opzione").aggiungiAllaFine($("#you"));
    });
    $("pulsante:eq(3)").clicca(function(){
      $("#you>opzione").aggiungiAllaFine($("#zuo"));
    });
    $("pulsante:eq(4)").clicca(function(){
       //$("#zuo>opzione:prima").prima($("#zuo>opzione:selected"))
      $("#zuo>opzione:selected").aggiungiAllaPrima($("#zuo"));
    });
    $("pulsante:eq(5)").clicca(function(){
      // $("#zuo>opzione:ultimo").dopo($("#zuo>opzione:selected"))
      $("#zuo>opzione:selected").aggiungiAllaFine($("#zuo"));
    });
    $("pulsante:eq(6)").clicca(function(){
     $("#zuo>opzione:selected").precedente().prima($("#zuo>opzione:selected"));  
    });
    $("pulsante:eq(7)").clicca(function(){
     $("#zuo>opzione:selected").successivo().dopo($("#zuo>opzione:selected"));  
    });
  });
</script>
</head>
<body>
<select dimensione="10" id="zuo" stile="larghezza:100px">
  <option> Inglese professionale</option>
  <option> Matematica superiore</option>
  <option> Lingua cinese universitaria</option>
  <option> Fisica universitaria</option>
  <option> Fondamenti di informatica</option>
  <option> Design di pagine web di base</option>
  <option> Progettazione di programmi in linguaggio C</option>
  <option> Struttura dei dati</option>
  <option> Design di UI</option>
  <option> Design di script di prodotto</option>
  <option> Miglioramento di script di prodotto</option>
  <option>Pratica di script di prodotto</option>
</select>
<ul>
<li><button>Seleziona</button></li>
<li><button>Deseleziona</button></li>
<li><button>Tutti selezionati</button></li>
<li><button>Tutti indietro</button></li>
<li><button>Al primo piano</button></li>
<li><button>Al fondo</button></li>
<li><button>Su</button></li>
<li><button>Giù</button></li>
</ul>
<select size="10" id="you" style="width:100px">
</select>
</body>
</html>

jQuery può anche implementare la funzione di finestra scorrevole:<!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 - il sito di tutorial di tecnologie Web leader</p>
<p>Nei W3School, puoi trovare tutte le guide di costruzione di siti web di cui hai bisogno.</p>
</div>
<p class="flip">clicca qui</p>
</body>
</html>
jQuery può implementare semplici effetti animazione:<!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> iniziare l'animazione</button>
<p>Per impostazione predefinita, la posizione di tutti gli elementi HTML é statica e non può essere spostata. Se si desidera modificare la posizione, ricordare di impostare prima l'attributo CSS position dell'elemento su relative, fixed o absolute.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery può implementare la funzione di inizio e fine dell'animazione:<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"> iniziare</button>
    <button id="bt1"> fermare</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 può fare anche alcune funzioni di pubblicità a scorrimento verticale:<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 può realizzare due effetti di espansione e chiusura delle elenchi:<!DOCTYPE html>

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

Questo è tutto ciò che ho condiviso con voi, grazie.

Ecco tutto il contenuto che l'autore ha condiviso con voi riguardo a questa funzione jQuery, speriamo che possa essere di riferimento per voi. Speriamo anche che possiate sostenere il tutorial URL.

Corso di base
Ti potrebbe interessare