Maison > Article > interface Web > Méthode de mise en œuvre simple de l'effet de barrage jQuery

Méthode de mise en œuvre simple de l'effet de barrage jQuery

小云云original: 2018-01-12 11:23:471705parcourir

Cet article présente principalement en détail les informations pertinentes pour implémenter simplement l'effet de barrage jQuery. J'espère qu'il pourra vous aider.

Quand on veut rédiger un cas de barrage, il faut d'abord savoir quoi faire à chaque étape.
Après avoir d'abord configuré le framework, vous devez être prêt à effectuer les étapes suivantes lors de l'envoi d'un barrage :

Récupérez le contenu à envoyer au barrage, c'est-à-dire obtenez le contenu saisi dans la zone de texte contenu. Générez un élément via le var str = $("#ID de la zone de texte").val();
: Générez un élément à l'aide du var createSpan =$("") de jQuery élément span pour l’envoi.
Attribuez une valeur au span qui vient d'être créé, c'est-à-dire la valeur dans la zone de texte obtenue createSpan.text(str);
Définir l'élément Les effets d'animation font bouger les éléments. Utilisez l'animation de jQuery (valeur de style CSS, heure, méthode à appeler après l'exécution de l'animation). Après avoir exécuté l'animation, vous devez supprimer manuellement les éléments que vous venez d'ajouter.

Il contient de nombreux détails, vous serez récompensé si vous regardez attentivement !

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
 <title>弹幕案例</title>
 <script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
 <script>
 $(function(){
  var boxDom = $("#boxDom");
  //var domContent = $("#domContent");

  var top, right;

  var pageWidth = parseInt($(document).width());
  var pageHeight =parseInt($(document).height());

  //点击按钮
  $("#btn").bind("click",auto);//按钮绑定方法
  //按下回车
  document.onkeydown = function(){
   if(event.keyCode == 13){
    auto();
   }
  }
  function auto(){
  //1.获取输入的字符串
  var str = $(".text").val();
  //2.生成一个元素
  var createSpan = $("<span class = &#39;string&#39; ></span>");

  //3.给生成的元素赋值

  createSpan.text(str);

  //为了页面友好，清空刚刚输入的值
  $(".text").val("");

 //生成元素一个随机的位置，为了使每条弹幕都出现在屏幕上不同的位置
  top = Math.floor(Math.random()*pageHeight);


 createSpan.css({"top":top, "right": -400, "color": getRandomColor()});
  boxDom.append(createSpan);

  //4.设置元素的动画效果，animate(css样式值，时间， 执行完动画调用的方法)

  //页面上有N个span，只让最后一个动起来
  var spandom = $("#boxDom>span:last-child");//找到最后一个span
  spandom.animate({"right":pageWidth+300},10000,function(){
   //移除元素
   $(this).remove();

  });
  }
  //定义一个可以生成随机颜色的方法,可以使每条弹幕的颜色不同
  function getRandomColor(){
   var colorArr = [&#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;5&#39;,&#39;6&#39;,&#39;7&#39;,&#39;8&#39;,&#39;9&#39;,&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;,&#39;E&#39;,&#39;F&#39;];
   var color = "";
   for(var i = 0; i < 6; i++){
    color += colorArr[Math.floor(Math.random()*16)]; 
   }
   return "#"+color;
  }

 });
 </script>
 <style type="text/css">
 html,body{
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  font-family: "微软雅黑";
  background: #ccc;
 }
 .boxDom{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
 }
 .idDom{
  width: 100%;
  height: 60px;
  background:#666;
  position: fixed;
  bottom: 0px;
 }
 .contet{
  width: 500px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;

 }
 .title{
  display: inline;
  font-size: 24px;
  vertical-align: bottom;
  color: #ffffff;
  padding-left: 300px;
 }

 .text{
  width: 300px;
  height: 30px;
  border:none;
  border-radius:5px;
  font-size: 20px;
  margin-left:60px;
 }
 .btn{
  width: 60px;
  height: 30px;
  color: #ffffff;
  background-color: red;
  border:none;
  font-size:16px;
  margin-left:60px;
  margin-top: 20px;
 }
 .string {
   width: 300px;
   height: 40px;
   margin-top: 20px;
   position: absolute;
   color: #000;
   font-size: 20px;
   font-family: "微软雅黑";

 }
 </style>
</head>
<body>
<p class = "boxDom" id = "boxDom">
 <img src="../images/bg_2.jpg" style="width:100%; height:100%" />
 <p id = "idDom" class = "idDom">
  <p class = "content">
   <p class = "title"> 说点什么:</p>
   <input type = "text" class = "text"/>
   <button type = "button" class = "btn" id = "btn" >发送</button>
  </p>
 </p>
</p>
</body>
</html>

Le rendu est le suivant :

Recommandations associées :

Effet de barrage de texte HTML5

Implémentation JavaScript d'un exemple d'analyse d'effet de barrage simple

Barrage d'applet WeChat Implémentation du code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

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

Article précédent：Partage d'exemples de jquery imitant l'interface de chat WeChatArticle suivant：Partage d'exemples de jquery imitant l'interface de chat WeChat

Articles Liés

Voir plus