Js text horizontal scrolling effect, js horizontal scrolling

Js text horizontal scrolling effect, js horizontal scrolling

This article shares the js text horizontal scrolling special effect code. The specific implementation content is as follows:

Page Layout 

<Div id = "scroll_div" class = "fl"> <div id = "scroll_begin"> congratulations, 793765 *** received the <span class = "pad_right"> 50 yuan giant node card reward </span> congratulations, 793765 *** received the <span class = "pad_right"> 50 yuan giant node card reward </span> congratulations, 793765 *** received the <span class = "pad_right"> 50 yuan giant node card reward </span> congratulations, 793765 *** received <span class = "pad_right"> 50 yuan giant node card reward </span> congratulations, 793765 *** received <span class = "pad_right"> 50 yuan giant node card reward </span> congratulations, 793765 *** received <span class = "pad_right"> 50 yuan giant node card reward </span> congratulations 793765 *** get <span class = "pad_right"> 50 yuan giant node card reward </span> </div> <div id = "scroll_end"> </div>/ div>

Style:

.pad_right{ padding-right:2em;}#scroll_div {height:26px;overflow: hidden;white-space: nowrap;width:535px;margin-left:10px;}#scroll_begin,#scroll_end {display: inline;}

Js Code:

// Function ScrollImgLeft () {var speed = 50; var MyMar = null; var scroll_begin = document. getElementById ("scroll_begin"); var scroll_end = document. getElementById ("scroll_end"); var scroll_div = document. getElementById ("scroll_div"); Aggregate = aggregate; function Marquee () {if (scroll_end.offsetWidth-scroll_div.scrollLeft <= 0) scroll_div.scrollLeft-= aggregate; else scroll_div.scrollLeft ++;} MyMar = setInterval (Marquee, speed); scroll_div.onmouseover = function () {clearInterval (MyMar);} scroll_div.onmouseout = function () {MyMar = setInterval (Marquee, speed) ;}} ScrollImgLeft ();

The above shows how to easily implement the js text lateral scrolling effect. You can add the js text lateral scrolling effect to Your webpage.