js實現七夕表白彈幕效果 jQuery實現彈幕技術

Posted on by

本文實例為大傢分享瞭js與jQuery技術實現表白彈幕，供大傢參考，具體內容如下

js七夕表白彈幕效果簡單版效果：

關鍵代碼：

<script>
        var si;
        function tangmu(){
            clearInterval(si);
            var text = document.getElementById("text");
            var tangmu = document.getElementById("tangmu");
 
            var textStyle="<font id=\"textStyle\">"+text.value+"</font>";
             
            mathHeight = Math.round(Math.random()*tangmu.offsetHeight)+"px";
 
            var textLeft=tangmu.offsetWidth+"px";
             
            tangmu.innerHTML=textStyle;
             
            var textStyleObj = document.getElementById("textStyle");
             
            textStyleObj.style.left=textLeft;
            textStyleObj.style.top=mathHeight;
             
            var x=parseInt(textStyleObj.style.left);
             
            si = setInterval("xunhuan("+x+")",100);
             
        }
        function xunhuan(left){
            var textStyleObj = document.getElementById("textStyle");
            textStyleObj.style.left=left;
             
            var x=parseInt(textStyleObj.style.left);
 
            if(x<textStyleObj.style.width){
                document.getElementById("tangmu").innerHTML="";
                clearInterval(si);
            }else{
                x-=18;
            }
             
            textStyleObj.style.left=x+"px";
        }
</script>

jQuery實現彈幕技術：

效果：

關鍵代碼：

<script src="jquery-1.11.1.js"></script>
<script>

    $(function () {
        $(".showBarrage,.s_close").click(function () {
            $(".barrage,.s_close").toggle("slow");
        });
        init_barrage();
    })

    //提交評論
    $(".send .s_btn").click(function () {
        var text = $(".s_text").val();
        if (text == "") {
            return;
        }

        var _lable = $("<div style='right:20px;top:0px;opacity:1;color:" + getRandomColor() + ";'>" + text + "</div>");
        $(".mask").append(_lable.show());
        init_barrage();
    })

    //初始化彈幕技術
    function init_barrage() {
        var _top = 0;
        $(".mask div").show().each(function () {
                    var _left = $(window).width() - $(this).width();//瀏覽器最大寬度，作為定位left的值
                    var _height = $(window).height();//瀏覽器最大高度
                    _top += 75;
                    if (_top >= (_height - 130)) {
                        _top = 0;
                    }
                    $(this).css({left: _left, top: _top, color: getRandomColor()});

                   //定時彈出文字
                    var time = 10000;
                    if ($(this).index() % 2 == 0) {
                        time = 15000;
                    }

                    $(this).animate({left: "-" + _left + "px"}, time, function () {
                        $(this).remove();
                    });

                }
        );

    }

    //獲取隨機顏色
    function getRandomColor() {
        return '#' + (function (h) {
                    return new Array(7 - h.length).join("0") + h
                })((Math.random() * 0x1000000 << 0).toString(16))
    }

</script>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：