jQuery弹幕（兼容IE8）

来源：互联网发布：天津爆炸知乎编辑：程序博客网时间：2024/05/18 03:27

超简单的jQuery弹幕，支持IE8！！！

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>超简单版弹幕</title>        <style type="text/css">            *{padding: 0;margin: 0;box-sizing: border-box;}            .con{                width: 100%;                margin: 0 auto;            }            .box{                width: 1200px;                height: 500px;                background: #D9D9D9;                margin-top: 50px;                position: relative;                overflow: hidden;                margin: 50px auto 0;            }            .box h3{                text-align: center;                line-height: 500px;            }            .box .dm{                position: absolute;                display: table;            }            .ipt{                width: 1200px;                margin: 0 auto;                margin-top: 10px;                position: relative;                border: 1px solid #999;            }            .ipt input{                border: none;                text-indent: 10px;                width: 100%;                padding: 10px 0;            }            .ipt button{                position: absolute;                border: none;                top: 0;                right: 0;                height: 35px;                padding: 0 30px;            }        </style>    </head>    <body>        <div class="con">            <div class="box">                <h3>弹幕区域</h3>            </div>            <div class="ipt">                <input id="ipt" type="text" name="" id="" value="" placeholder="请输入弹幕" />                <button id="btn_fs">发送</button>            </div>        </div>        <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            //点击发送            $("#btn_fs").on("click",function(){                send()            });            //回车发送                      $("#ipt").on("keydown",function(e){                if (e.keyCode === 13) {                    send()                }            })            //发送            function send(){                if ($("#ipt").val() != "" && $("#ipt").val().length<= 15) {                    createEle();                    $("#ipt").val("")                }else{                    alert("弹幕不能为空或者不能超过15个字符")                }            }            //创建元素            function createEle(){                var sjs = Math.ceil(Math.random()*$(".box").height())  //弹幕高度的随机数                var spanEle = $("<span class='dm'></span>");           //创建span元素                spanEle.html($("#ipt").val())                          //追加文本内容                $(".box").append(spanEle)                              //追加到box                spanEle.css("right",-spanEle.width()+"px");             //设置css属性，right                spanEle.css("top",sjs+"px")                             //设置css属性，top                roll(spanEle)                                           //调用弹幕,将元素传参，进行弹幕            };            //弹幕滚动            function roll(ele){                var num = -ele.width();                 //span元素的宽                var w = $(ele).width();                    //span元素的宽                setInterval(function(){                    var left = $(ele).offset().left;   //span元素的left值                    num++;                    if (left<= -w) {                    //判断left是否小于span的宽                        clearInterval()                 //清除定时器                        $(ele).remove()                    //清除span                        return                    }                    $(ele).css("right",num+"px");                },10)            }        </script>    </body></html>

超简单的jQuery弹幕，像弹幕颜色，字体大小，速度变化等等一些骚操作，请自行添加

我本布衣，一介码农，路漫漫其修远兮，道阻且长，可是——我们正青春！

阅读全文

1 0

jQuery弹幕 （兼容IE8）

超简单的jQuery弹幕，支持IE8！！！

jQuery弹幕（兼容IE8）