Jquery实现弹幕效果

秒速五厘米 2022-09-25 07:29 223阅读 0赞

用jquery写了一个弹幕的小功能，供大家参考学习。

**前端显示**

**样式**

<span style="font-size:14px;">html,body{margin:0px;padding:0px;width: 100%;height:100%;font-family: "微软雅黑";font-size: 62.5%;background: #ccc;}
        .boxDom {
            width:100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .idDom {
            width: 100%;
            height: 60px;
            background: #666;
            position: fixed;
            bottom: 0px;
        }
        .content {
            display: inline-block;
            width:430px;
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
            top:0px;
            bottom:0px;
            margin:auto;
        }
        .title {
            display: inline;
            font-size: 4em;
            vertical-align:bottom;
            color:#fff;
        }
        .text {
            border:none;
            width:300px;
            height: 30px;
            border-radius: 5px;
            font-size: 2.4em;
        }
        .btn {
            width:60px;
            height: 30px;
            background: #f90000;
            border:none;
            color:#fff;
            font-size: 2.4em;
        }
        .string {
            width:300px;
            height: 40px;
            position: absolute;
            overflow: hidden;
            color:#000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space:nowrap;
        }</span>

**JS**

<span style="font-size:14px;"> $(function(){
            var pageW=parseInt($(document).width());	//获取页面宽度
            //alert(pageW);
            var pageH=parseInt($(document).height());	//获取页面高度
            var boxDom=$("#boxDom");
            var btnDom=$("#btn");
            var Top,Right;
            var width;
            width=pageW;
            var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
            btnDom.bind("click",auto);
            function auto(){
                var creSpan=$("<span class='string'></span>");
                var text=$("#text").val();
                //alert(text);
                creSpan.text(text);
                //alert(creSpan.text());
                Top=parseInt(pageH*(Math.random()));
                var num=parseInt(colorArr.length*(Math.random()));
                if(Top>pageH-90){
                    Top=pageH-90;
                }
                //creSpan.css({"top":Top,"right":-300,"color":colorArr[num]});
                creSpan.css({"top":Top,"right":-300,"color":getRandomColor()});//扩展字幕颜色
                boxDom.append(creSpan);
                var spanDom=$("#boxDom>span:last-child");
                //alert(spanDom.html());
                spanDom.stop().animate({"right":pageW+300},10000,"linear",function(){
                            $(this).remove();
                        });
            }
            function getRandomColor(){
                return '#' + (function(h){
                    return new Array(7 - h.length).join("0") + h;
                })((Math.random() * 0x1000000 << 0).toString(16));
            }
       });</span>

看一张效果图： ![Center][]

效果还可以，当然还有需要改进的地方，比如弹幕出现在了底部的需要重新计算Top的值；另外想抽时间利用Ajax设计数据库，对发言的数据进行后台保存。

[Center]: /images/20220718/6562c06bca154cceaee5d4d433a67620.png