The text running based on jquery is similar to the effect of the running lamp.

The text running based on jquery is similar to the effect of the running lamp.

I want to achieve a similar effect, and found that there are spaces in the lamp. The effect is not beautiful, so I wrote

Page code

<Div class = "recordList"> <ul class = "tpl-rotate-recordList" style = "margin-top: 0px; "> <li class =" tpl-rotate-recordList-item "> congratulations, 187 *** 5204 got 1000RBM </li> <li class =" tpl-rotate-recordList- item "> congratulations 137 **** 1372 get 1000RBM </li> <li class =" tpl-rotate-recordList-item "> congratulations 156 *** 0276 get 1000RBM </li> <li class = "tpl-rotate-recordList-item"> congratulations 139 *** 9856 getting 1000RBM </li> <li class = "tpl-rotate-recordList -item "> congratulations 136 **** 0580 for obtaining 1000RBM </li> <li class =" tpl-rotate-recordList-item "> congratulations 136 *** 0580 for obtaining 1000RBM </li> <li class = "tpl-rotate-recordList-item"> congratulations 138 *** 8118 getting 1000RBM </li> <li class = "tpl-rotate- recordList-item "> congratulations 136 *** 5555 obtaining 1000RBM </li> <li class =" tpl-rotate-recordList-item "> congratulations 136 *** 0580 obtaining 1000RBM </li> <li class = "tpl-rotate-recordList-item"> congratulations 136 *** 0580 getting 1000RBM </li> </ul> </div>

Js Code

/* Automatic rotation xuyw */var AutoScroll = function (a) {$ (). find ("ul: first "). animate ({marginTop: "-20px"}, 500, function () {detail (this).css ({marginTop: "0px "}). find ("li: first "). appendTo (this)} if ($ (". recordList ul li "). length> 0) {setInterval ('autoscroll (". recordList ") ', 2000)} else {$ (". recordList "). hide ()}

Jquery or js Code with a line of text

<Div align = "center" id = "demo" style = "overflow: hidden; height: 200px; width: 600px; border: 1px solid #000;">
<Div id = "demo1">
Standard path-DIV + CSS tutorial, web layout, web2.0, common code, crystal icons, and slides
</Div>
<Div id = "demo2"> </div>
</Div>
<Script language = "javascript" type = "text/javascript">
<! --
Var demo = document. getElementById ("demo ");
Var demo1 = document. getElementById ("demo1 ");
Var demo2 = document. getElementById ("demo2 ");
Var speed = 10; // The scroll speed value. The greater the value, the slower the speed.
Var nnn= 200/demo1.offsetHeight;
For (I = 0; I <nnn; I ++) {demo1.innerHTML + = "<br/>" + demo1.innerHTML}
Demo2.innerHTML = demo1.innerHTML // clone demo2 to demo1
Function Marquee (){
If (demo2.offsetTop-demo. scrollTop <= 0) // when rolling to the junction of demo1 and demo2
Demo. scrollTop-= demo1.offsetHeight // The demo jumps to the top
Else {
Demo. scrollTop ++
}
}
Var MyMar = setInterval (Marquee, speed); // sets the timer.
Demo. onmouseover = function () {clearInterval (MyMar)} // clear the timer when the mouse goes through to stop rolling.
Demo. onmouseout = function () {MyMar = setInterval (Marquee, speed)} // reset the timer when you move the cursor away
-->
</Script>
 
2. Place at least one line of text drive lights in a proper position on the webpage, and run from left to right.

<Marquee direction = "left" behavior = "slide"> enter the text to be displayed in this area. </marquee>
Place this code on the position where you want to display the marquee.