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:
|
<<: Analysis of SQL integrity constraint statements in database
>>: How to express relative paths in Linux
I started using Linux for development and enterta...
Table of contents Manual backup Timer backup Manu...
1. Introduction First of all, we need to answer a...
This article records the specific steps for downl...
1. Install Docker yum -y install docker-io The &q...
Preface: I heard a long time ago that MySQL 8.0 s...
Docker is an open source engine that makes it eas...
Introduction to structure and performance HTML st...
I haven't written a blog for a long time. Las...
In the database, both UNION and UNION ALL keyword...
When connecting to the local database, navicat fo...
1. Overview of file permissions and ownership 1. ...
Table of contents Written in front router.json Ro...
trigger: Trigger usage scenarios and correspondin...
1. Introduction tr is used to convert or delete a...