Heim > Artikel > Web-Frontend > Wie implementiert jQuery Sperrfeuer? jQuery-Code, um einen Sperreffekt zu erzielen

Wie implementiert jQuery Sperrfeuer? jQuery-Code, um einen Sperreffekt zu erzielen

不言Original: 2018-08-07 11:50:481873Durchsuche

Der Inhalt dieses Artikels befasst sich damit, wie jQuery Barrage implementiert. Der jQuery-Code zur Erzielung des Sperreffekts hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Der Code für jQuery zum Erzielen des Sperreffekts lautet wie folgt:

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title>JQ实现弹幕效果</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                height:700px;
                width:1000px;
                margin: 0 auto;
                border:1px solid #000000;
                position: relative;
            }
            #main{
                width:100%;
                height:605px;
                position: relative;
                overflow: hidden;
            }
            p{
                position: absolute;
                left:1000px;
                width:200px;
                top:0;
            }
            #bottom{
                width:100%;
                height:80px;
                background: #ABCDEF;
                text-align: center;
                padding-top: 15px;
                position: absolute;
                left: 0;
                bottom: 0;
            }
            #txt{
                width:300px;
                height:50px;    
            }
            #btn{
                width:100px;
                height:50px;                
            }
        </style>
    </head>
    <body>
        <p id="box">
            <p id="main">
                
            </p>
            <p id="bottom">
                <input type="text" id="txt" placeholder="请输入内容" />
                <input type="button" id="btn" value="发射" />
            </p>
        </p>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript">
            $(function(){                var pageH=parseInt($("#main").height());                var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];                
                $("#btn").bind("click",auto);
                document.onkeydown=function(e){                    if(e.keyCode == 13){
                        auto();
                    }
                };                function auto(){                    var $value = $("#txt").val();
                    $("#main").append("<p>" + $value + "</p>");
                    $("#txt").val("");                    var _top=parseInt(pageH*(Math.random()));                    var num=parseInt(colorArr.length*(Math.random()));
                    $("p:last-child").css({"top":_top,"color":colorArr[num],"font-size":"20px"});
                    $("p:last-child").animate({"left":"-200px"},10000);
                    $("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){
                        $(this).remove();
                   });                
                    //console.log($value);                };
                
            })        </script>
    </body></html>

Empfohlene verwandte Artikel:

Verwenden Sie JS, um eine Stoppuhr mit einer Genauigkeit von 10 ms zu erstellen (Code im Anhang)

Wie verwende ich natives JavaScript, um ein Karussell zu implementieren? Detaillierte Code-Erklärung

Das obige ist der detaillierte Inhalt vonWie implementiert jQuery Sperrfeuer? jQuery-Code, um einen Sperreffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie JS, um eine Stoppuhr mit einer Genauigkeit von 10 ms zu erstellen (Code beigefügt)Nächster Artikel：Verwenden Sie JS, um eine Stoppuhr mit einer Genauigkeit von 10 ms zu erstellen (Code beigefügt)

In Verbindung stehende Artikel

Mehr sehen