怎么用jQuery實(shí)現(xiàn)彈幕效果

發(fā)布時(shí)間：2021-08-20 17:36:40 來源：億速云閱讀：159 作者：chen 欄目：開發(fā)技術(shù)

這篇文章主要講解了“怎么用jQuery實(shí)現(xiàn)彈幕效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用jQuery實(shí)現(xiàn)彈幕效果”吧！

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)彈幕效果的具體代碼，供大家參考，具體內(nèi)容如下

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吐槽彈幕</title>
    
    <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
    <style>
            html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微軟雅黑";
      font-size: 62.5%;
    }
    
    .boxDom {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .idDom {
      width: 100%;
      height: 100px;
      background: #666;
      position: fixed;
      bottom: 0px;
    }
    
    .content {
      display: inline-block;
      width: 430px;
      height: 40px;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
    }
    
    .title {
      display: inline;
      font-size: 4em;
      vertical-align: bottom;
      color: #fff;
    }
    
    .text {
      border: none;
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 2.4em;
    }
    
    .btn {
      width: 60px;
      height: 30px;
      background: #f90000;
      border: none;
      color: #fff;
      font-size: 2.4em;
    }
    
    span {
      width: 300px;
      height: 40px;
      position: absolute;
      overflow: hidden;
      color: #000;
      font-size: 4em;
      line-height: 1.5em;
      cursor: pointer;
      white-space: nowrap;
    }
    </style> 
</head> 
   
<body>
    
<div class="boxDom" id="boxDom">
  <div class="idDom" id="idDom">
    <div class="content">
      <p class="title">吐槽:</p>
      <input type="text" class="text" id="text"/>
      <button type="button" class="btn" id="btn">發(fā)射</button>
    </div>
  </div>
</div>
 
<script>
   
  
  $(function () {
    
      //注冊(cè)事件  各個(gè)顏色的彈幕字體
    var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
    $("#btn").click(function () {
      var randomColor = parseInt(Math.random() * colors.length);
      var randomY = parseInt(Math.random() * 400);
      
      $("<span></span>")//創(chuàng)建span
        .text($("#text").val())//設(shè)置內(nèi)容
        .css("color", colors[randomColor])//設(shè)置字體顏色
        .css("left", "1400px")//設(shè)置left值
        .css("top", randomY)//設(shè)置top值
        .animate({left: -500}, 10000, "linear", function () {
          //到了終點(diǎn)，需要?jiǎng)h除
          $(this).remove();
        })//添加動(dòng)畫
        .appendTo("#boxDom");
      
      
      $("#text").val("");
    });
    
    
    $("#text").keyup(function (e) {
      if (e.keyCode == 13) {
        $("#btn").click();
      }
    });
    
  });
</script>
</body>
</html>

感謝各位的閱讀，以上就是“怎么用jQuery實(shí)現(xiàn)彈幕效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用jQuery實(shí)現(xiàn)彈幕效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

怎么用jQuery實(shí)現(xiàn)彈幕效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽