Implementation de l'effet de bulletins d'information avec jQuery

L'effet suivant :

Le code suivant :

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 #wrap{
 width:800px;
 height:550px;
 background:#E9E8E8;
 margin:0 auto;
 position:relative;
 }
 #content{
 width:750px;
 height:400px;
 background:#fff;
 margin:0 auto;
 border-radius: 15px;
 position:relative;
 overflow:hidden;
 }
 input:nth-of-type(1){
 width:250px;
 height:30px;
 margin:20px 0 0 200px;  
 }
 input:nth-of-type(2){
 width:60px;
 height:33px;  
 }
 .p{
 height:30px;
 line-height:30px;
 position:absolute;
 top:0;
 left:770px;
 font-weight:900;
 font-size: 30px;
 }
 </style>
 </head>
 <body>
 <div id="wrap">
 <div id="content">
 </div>
 <input type="text" id="txt" placeholder="Partagez vos blagues~"/>
 <input type="button" value="Envoyer" id="btn" />
 </div>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
 <script>
 $(function(){
 $("#btn").click(function(){
  var $value=$("#txt").val();
  var $p=$("<p></p>");
  $p.addClass("p");
  $p.text($value);
  $("#txt").val("");//Cliquez sur le texte pour vider le contenu de la boîte de texte
  var _top=Math.floor(Math.random()*($("#content").innerHeight()-30));
  var _fontsize=16+Math.floor(Math.random()*10);
  var _rgb="rgb(" + Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255)+")"; 
  $p.css({"top":_top,"font-size":_fontsize,"color":_rgb});
  $("#content").append($p);
  var _timer=Math.ceil(Math.random()*4000)+3000;
  $p.stop().animate({"left":"-500px"},_timer,function(){
  $p.remove();
  }); 
 });
 })
 </script>
 </body>
</html>

Voici la fin de cet article. J'espère que le contenu de cet article peut vous aider dans vos études ou votre travail. J'espère aussi que vous soutenerez davantage le tutoriel 'Néchant'.

Déclaration : Le contenu de cet article est extrait du réseau, propriété du propriétaire du réseau, apporté par les utilisateurs d'Internet et téléversé spontanément. Ce site n'est pas propriétaire des droits d'auteur, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé de violation de droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour faire une plainte, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé de violation de droits d'auteur.)

Tutoriel de base