How to realize the effect of on-screen comment with jQuery Code
Today, I would like to share with you how to use jQuery code to achieve on-screen comment effect of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.
The effect is as follows:
The code is as follows:
* {margin:0; padding:0;} # wrap {width:800px; height:550px; background:#E9E8E8; margin:0 auto; position:relative;} # content {width:750px; height:400px; background:#fff; margin:0 auto; border-radius: 15px; position:relative; overflow:hidden;} input:nth-of-type (1) {width:250px; height:30px; margin:20px 00 200px;} input:nth-of-type (2) {width:60px; height:33px } .p {height:30px; line-height:30px; position:absolute; top:0; left:770px; font-weight:900; font-size: 30px;} $(function () {$("# btn") .click (function () {var $value=$ ("# txt"). Val (); var $paired $("
"); $p.addClass (" p "); $p.text ($value); $(" # txt "). Val ("); / / set the text box content to empty var _ top=Math.floor (Math.random () * ($(" # content "). InnerHeight ()-30); var _ fontsize=16+Math.floor (Math.random () * 10) Var _ rgb= "rgb (" + Math.floor (Math.random () * 255) + "," + Math.floor (Math.random () * 255) + "," + Math.floor (Math.random () * 255) + ")"; $p.css ({"top": _ top, "font-size": _ fontsize, "color": _ rgb}); $("# content"). Append ($p); var _ timer=Math.ceil (Math.random () * 4000) + 3000 $p.stop (). Animate ({"left": "- 500px"}, _ timer,function () {$(this). Remove ();}). Animate ({"left": "- 500px"}, _ timer,function () {$(this). Remove ();}). Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
