温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用jQuery实现弹幕效果

发布时间:2021-08-20 17:36:40 阅读:175 作者:chen 栏目:开发技术
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要讲解了“怎么用jQuery实现弹幕效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用jQuery实现弹幕效果”吧!

本文实例为大家分享了jQuery实现弹幕效果的具体代码,供大家参考,具体内容如下

效果:

怎么用jQuery实现弹幕效果

<!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>
            htmlbody {
      margin0px;
      padding0px;
      width100%;
      height100%;
      font-family"微软雅黑";
      font-size62.5%;
    }
    
    .boxDom {
      width100%;
      height100%;
      position: relative;
      overflow: hidden;
    }
    
    .idDom {
      width100%;
      height100px;
      background#666;
      position: fixed;
      bottom0px;
    }
    
    .content {
      display: inline-block;
      width430px;
      height40px;
      position: absolute;
      left0px;
      right0px;
      top0px;
      bottom0px;
      margin: auto;
    }
    
    .title {
      display: inline;
      font-size4em;
      vertical-align: bottom;
      color#fff;
    }
    
    .text {
      border: none;
      width300px;
      height30px;
      border-radius5px;
      font-size2.4em;
    }
    
    .btn {
      width60px;
      height30px;
      background#f90000;
      border: none;
      color#fff;
      font-size2.4em;
    }
    
    span {
      width300px;
      height40px;
      position: absolute;
      overflow: hidden;
      color#000;
      font-size4em;
      line-height1.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">发射</button>
    </div>
  </div>
</div>
 
<script>
   
  
  $(function () {
    
      //注册事件  各个颜色的弹幕字体
    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>")//创建span
        .text($("#text").val())//设置内容
        .css("color", colors[randomColor])//设置字体颜色
        .css("left""1400px")//设置left值
        .css("top", randomY)//设置top值
        .animate({left: -500}, 10000"linear"function () {
          //到了终点,需要删除
          $(this).remove();
        })//添加动画
        .appendTo("#boxDom");
      
      
      $("#text").val("");
    });
    
    
    $("#text").keyup(function (e) {
      if (e.keyCode == 13) {
        $("#btn").click();
      }
    });
    
  });
</script>
</body>
</html>

感谢各位的阅读,以上就是“怎么用jQuery实现弹幕效果”的内容了,经过本文的学习后,相信大家对怎么用jQuery实现弹幕效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×