• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

js实现七夕表白弹幕效果 jQuery实现弹幕技术

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript基础入门之错误捕获机制发布时间:2022-02-05
下一篇:
JavaScript之ECharts用法讲解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap