js realizes the effect of Tanabata confession barrage, jQuery realizes barrage technology

js realizes the effect of Tanabata confession barrage, jQuery realizes barrage technology

This article shares the use of js and jQuery technology to realize the confession barrage for your reference. The specific content is as follows

js Tanabata confession bullet screen effect simple version effect:

Key code:

<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 implements barrage technology:

Effect:

Key code:

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

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

    //Submit comment $(".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();
    })

    // Initialize barrage technology function init_barrage() {
        var _top = 0;
        $(".mask div").show().each(function () {
                    var _left = $(window).width() - $(this).width(); //The maximum width of the browser, as the value of positioning left var _height = $(window).height(); //The maximum height of the browser _top += 75;
                    if (_top >= (_height - 130)) {
                        _top = 0;
                    }
                    $(this).css({left: _left, top: _top, color: getRandomColor()});

                   //Timed pop-up text var time = 10000;
                    if ($(this).index() % 2 == 0) {
                        time = 15000;
                    }

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

                }
        );

    }

    //Get random color function getRandomColor() {
        return '#' + (function (h) {
                    return new Array(7 - h.length).join("0") + h
                })((Math.random() * 0x1000000 << 0).toString(16))
    }

</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • jQuery to achieve simple barrage production
  • jQuery implements bullet screen effects
  • jQuery to achieve live barrage effect
  • jQuery implements simple bullet screen effect
  • Simple implementation of jQuery bullet screen effect
  • Implementing Danmu APP based on jQuery
  • Realizing the barrage effect based on jQuery
  • Another wonderful bullet screen effect jQuery implementation
  • Finally realized! Wonderful jQuery barrage effect
  • jQuery to achieve the barrage effect case

<<:  Analysis of SQL integrity constraint statements in database

>>:  How to express relative paths in Linux

Recommend

15 Vim quick reference tables to help you increase your efficiency by N times

I started using Linux for development and enterta...

Manual and scheduled backup steps for MySQL database

Table of contents Manual backup Timer backup Manu...

Implementation of multiple instances of tomcat on a single machine

1. Introduction First of all, we need to answer a...

MySQL 8.0.15 download and installation detailed tutorial is a must for novices!

This article records the specific steps for downl...

How to quickly add columns in MySQL 8.0

Preface: I heard a long time ago that MySQL 8.0 s...

Sharing the structure and expression principles of simple web page layout

Introduction to structure and performance HTML st...

Basic usage of UNION and UNION ALL in MySQL

In the database, both UNION and UNION ALL keyword...

Solution to 1045 error when navicat connects to mysql

When connecting to the local database, navicat fo...

Linux file/directory permissions and ownership management

1. Overview of file permissions and ownership 1. ...

MySQL trigger usage scenarios and method examples

trigger: Trigger usage scenarios and correspondin...

Use of Linux tr command

1. Introduction tr is used to convert or delete a...