zoukankan      html  css  js  c++  java
  • JavaScript实现弹幕效果

    效果如下

    <html>
    <head>
        <title></title>
      <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    </head>
        
    <body>
    <div class="container">
      <div>
          <h4>在这里输入弹幕</h4>
        <input id ="danmu" type="" name="">
        <button>发射</button>
      </div>
      <div class="show">
          <div id="start"></div>
        </div>
    </div>
    <script type="text/javascript">
        var dammuNum = 0;
        function create(msg){
            dammuNum++;
            $('#start').append("<div id=""+dammuNum+"">"+msg+"</div>");
            var top = Math.ceil(Math.random()*50);
            fun(dammuNum,900,top);
        }
        function fun(cla,n,top){
            if(n>0){
                n--;
    
                  $("#"+cla).css({left:+n+"px",position:"absolute",top:""+top+"0px"});
                setTimeout(fun,10,cla,n);
            }if(n==0){
                $("#"+cla).remove();
            }      
        }
    
    
        $("button").click(function(){
            create($("#danmu").val());
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    隐藏 阴影 定位 js语法与导入
    js 相关知识
    选择器 常用样式 布局
    前端
    数据库 备份
    SQLAlchemy 创建 增 删 改 查
    引擎 索引 日志查询 权限管理
    pysql
    数据库的操作
    Conv1*1
  • 原文地址:https://www.cnblogs.com/godoforange/p/10887881.html
Copyright © 2011-2022 走看看