This article mainly introduces jquery implementation of single line text scrolling effect, the need for friends can refer to the following
The code is as follows: <body> <div id= "title" style= "width:100%;height:40px;" > See discontinuous scrolling text </div> <div id= "content" class= "infocontent" > <div id= "Top" class= " Infolist "> <ul> <li> CCTV 315 Exposure: China Resources deep" sea sand door "response clear but not Qing </li> <li> Yoshinoya be exposed tableware disinfection Bo, such as cashmere cashmere sweater </li> <li> Wuxi police announced the "waiting for the female police unexpected misfortune" incident after </li> <li> Chinese one day: The last ferry horizon: Home "fix" </ li> </ul> </div> <div id= "Bottom" class= "infolist" ></div> </ div> <div id= "foot" ></div> </body> code is as follows:. Infolist{width:400px;matgin : 0;} Infolist ul{margin:0;padding:0;} Infolist ul li{list-style:none;height:26px;line-height:26px; INFOCONTENT{WIDTH:400PX;HEIGHT:26PX;OVERFLOW:HIDDEN;BORDER:1PX solid #666666; Code as follows: Var interval=1000;//two times between scrolling time interval var stepsize=26;//scrolling Once in length, must be a multiple of row height, so that when scrolling will not break the VAR objinterval=null; $ (document). ReaDY (function () { //fills the lower $ ("#bottom") with the contents of the upper part. HTML ($ ("#top"). html ()); //Bind mouse events to the displayed area $ ("# Content "). Bind (" MouseOver ", function () {stopscroll ();}); $ ("#content"). Bind ("Mouseout", function () {startscroll ();}); /Start timer Startscroll (); }); //start timer, start scrolling function startscroll () { Objinterval=setinterval ("Verticalloop ()", interval); } //purge timer, stop scrolling function Stopscroll () { Window.clearinterval (objinterval); } //control scrolling function Verticalloop () { // Determine if the upper contents are all moved out of the display area //If yes, start over; otherwise, continue moving up if ($ ("#content"). ScrollTop () >=$ ("#top"). Outerheight ()) { $ ("#content"). ScrollTop ($ ("#content"). ScrollTop ()-$ ("#top"). Outerheight ()); } // Use jquery to create animation effects $ ("#content") when scrolling. Animate ( {"ScrollTop": $ ("#content"). ScrollTop () +stepsize + "px"},600, function () { //This is used to display the scrolltop of the scrolling area, please delete //$ ("#foot") in the application. HTML ("ScrollTop:" +$ ("#content"). SCROlltop ()); }); } Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
