溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用jQuery代碼實現(xiàn)彈幕效果

發(fā)布時間：2022-03-31 10:09:57 來源：億速云 閱讀：547 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“怎么用jQuery代碼實現(xiàn)彈幕效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用jQuery代碼實現(xiàn)彈幕效果”吧!

先來看看運行效果：

怎么用jQuery代碼實現(xiàn)彈幕效果

下面將整個代碼顯示出來：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net彈幕</title>
<style type="text/css">
  html,body{
    background:#efefef;
    height:100%;
  }
  .danmu{
    width: 100px;
    height:30px;
    line-height: 28px;
    background: green;
    border-radius: 5px;
    border:1px solid #fff;
    color: #fff;
    outline: none;
  }
  div.mask{
    position:fixed;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    opacity:0.5;
    top:0px;
    left:0px;
  }
  div.bottom{
    width:100%;
    height:77px;
    background:linear-gradient(#ccc,#4a4a4a);
    position:fixed;
    bottom:0px;
    left:0px;
    text-align:center;
    line-height:77px;
  }
  div.bottom input.content{
    width:50%;
    min-width: 200px;
    height:37px;
    border:none;
    border-radius:10px 0px 0px 10px;
    font-size:16px;
    padding:0 10px;
    outline:none;
  }
  div.bottom a.send{
    background-color:green;
    color:#fff;
    display:inline-block;
    width:100px;
    height:38px;
    line-height:37px;
    text-align:center;
    position:relative;
    left:-10px;
    top:2px;
    border-radius:0px 10px 10px 0px;
    text-decoration:none;
    font-family:'Microsoft Yahei';
  }
  div.mask a.button{
    width:30px;
    height:30px;
    border-radius:50%;
    background-color:green;
    color:#fff;
    position:fixed;
    top:20px;
    right:20px;
    text-align:center;
    line-height:30px;
    font-size:20px;
    font-family:'Microsoft Yahei';
    border:1px solid #fff;
    text-decoration:none;
    cursor:pointer;
  }
  div.text{
    color:#fff;
    position:fixed;
    right:0px;
    font-size:20px;
    white-space: nowrap;
  }
</style>
</head>
<body>
<button class="danmu">彈幕技術(shù)</button>
  <div class="mask">
    <a href="#" rel="external nofollow" rel="external nofollow" class="button">X</a>
  </div>
  <!-- 底部發(fā)言框前端 -->
  <div class="bottom">
    <input class="content"></input>
    <a href="#" rel="external nofollow" rel="external nofollow" class="send">發(fā)表言論</a>
  </div>
  <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
   $("a.send").click(function(){
  var val=$(".content").val();
  var content=$("<div class='text'>"+val+"</div>");
  var top=Math.random()*$(document.body).height()+40+"px";
  content.css("top",top);
  $(".mask").append(content);
  content.animate({right:$(document.body).width()+100},8000,function(){
  $(this).remove();
  })
  });
  $('.button').click(function(){
      $('div.mask').fadeOut(500);
    });
    $(".danmu").click(function(){
     $('div.mask').fadeIn(500);
  });
</script>
</body>
</html>

到此，相信大家對“怎么用jQuery代碼實現(xiàn)彈幕效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手