实现弹幕效果

最新推荐文章于 2020-04-05 10:30:54 发布

yel125270

最新推荐文章于 2020-04-05 10:30:54 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/yel125270/article/details/95525918

版权

<style>
        *{padding: 0px; margin: 0px;}
        div{border: 1px solid #000; overflow: hidden; position: relative;}
        .main{width: 500px; height: 400px; margin: 50px auto; padding: 20px 20px; background: skyblue;}
        .ma1{width: 100%; height: 300px; background: #fff;}
        .ma2{width: 100%; margin-top: 30px; border-style: none;}
        .ma22{width: 410px; height: 50px; font-size: 16px; }
        button{ width: 66px; height: 50px;}
        .ma1 p{width:100%; margin-left: 100%;position: absolute; }
    </style>

上面为css样式设置，以下为body内容和 js代码：

<body>
    <div class="main">
      <div class="ma1">
          
      </div>
      <div class="ma2">
          <input type="text" class="ma22">
          <button> 发送</button>
      </div>
    </div>
 </body>       


<script>
        var cs=['white','green','red','skyblue','yellow','pink','blue']   //随机字体颜色
        // 点击事件
        $('button').click(function(){
            var $h=Math.random()*$('.ma1').height(); //随机高
            var index=parseInt(Math.random()*cs.length); //随机数组中的颜色
            
            $('<p></p>')
            .text($('.ma22').val())
            .css({
                'margin-top':$h+'px',
                'color':cs[index]
            })
            .appendTo('.ma1'); //将值追加到屏幕div中

            $('.ma22').val(''); //清空
            
            //添加效果
            $('p').delay(500).animate({ //延迟
                'margin-left':'-100%',
            },9000,'linear'); //匀速
        });
        
        //键盘回车事件
        $('.ma22').keyup(function(e){
            if(e.keyCode==13){
                $('button').click(); //调用
            }
        });

        
        
    </script>

yel125270

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现弹幕效果

<style> *{padding: 0px; margin: 0px;} div{border: 1px solid #000; overflow: hidden; position: relative;} .main{width: 500px; height: 400px; margin: 50px auto; padding: 20...
复制链接

扫一扫