jquery 几行代码实现弹幕

最新推荐文章于 2022-04-23 11:22:24 发布

__xa__

最新推荐文章于 2022-04-23 11:22:24 发布

阅读量267

点赞数

CC 4.0 BY-SA版权

文章标签：弹幕 jquery

本文链接：https://blog.youkuaiyun.com/dashoumeixi/article/details/97729569

<html>
<head>
    <title>Title</title>
    <style type="text/css">
        .div_class{
            background-color: aqua;
            width: 800px;
            height: 400px;

        }
        #img1 li{
            float: left;
        }
        #img1{
            width: 2000px;
        }

    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var img1 = $("#img1 li");

            for(var i = 0; i < img1.length ; ++i){
                if (i%2 == 0)
                    img1.eq(i).css({width:"100px", height:"300px", backgroundColor:'#FFE1FF'})
                else
                    img1.eq(i).css({width:"300px", height:"300px", backgroundColor:'red'})
            }
            img1.mouseenter(function(){
                img1.stop()
                $(this).animate({width:700}).siblings().animate({width:200})
            }).mouseleave(function () {
                img1.animate({width:300})
                img1.stop()
            });

            var font_colors = ['white','grey','yellow','green']
            var text = $("#txt");
            var send_btn = $("#send_btn");

    //上面无视, 下面弹幕
            send_btn.click(function(){
                var span = $("<h2></h2>").text(text.val());
                span.css({
                    'color':font_colors[parseInt(Math.random() * font_colors.length)],
                    'left' : "800px",
                    'top' : parseInt(Math.random() * 300) +"px",
                    "position" : 'relative'
                });
                span.appendTo(img1.eq(1))
                span.animate({left:"-500px"},3000,"linear",function(){
                    $(this).remove()
                });


                text.val("")
            });

            text.keyup(function (e) {
                if ( e.keyCode == 13)
                    send_btn.click()
            });
 })


</script>
</head>

<body>
<div id = "img1" class="div_class">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<textarea rows="2" cols="80" id="txt"></textarea>
    <button id="send_btn">发送</button>
</body>
</html>