Compatible Ie6, 7, 8,ff and Google browser text scroll up code

Last Update:2017-01-13 Source: Internet

Author: User

Tags setinterval

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

code is as follows

copy code

Ul.style.top + = parseint (ul.style.top) +30+ "px";

Ul.removechild (Li_move);
Ul.appendchild (Li_move);
Ul.style.top = "0"

}

function Scroll (obj)
{
var t= setinterval (function () {scrollonestep (obj);},1000);
}
</script>

In this case, if you need to scroll a single line, you can simply change the value of the #div1 in the CSS to 18.

Note: Tested compatible IE6, 7, 8,FF and Google Browser!

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title> News list Single Scroll JS effect, the number of scrolling JS effect, super simple </title>
<style>
A{display:block;line-height:18px;text-decoration:none;color: #f00; font-family:arial;font-size:12px;}
A:hover{text-decoration:underline;}
. shell{width:220px;}
#div1 {Height:72px;overflow:hidden;}
</style>
<body>
<div class= "Shell" >
<div id= "Div1" >
<a href= "/js" >1jquery's picture scrolling switch plugin </a>
<a href= "/js" >2mootools slider scroll bar drag value implementation </a>
<a href= "/js" &GT;3VB development of Eclipse programming software full version </a>
<a href= "/js" >4vc++ generation of random numbers and fast sorting algorithm </a>
<a href= "/js" &GT;5VB Voice count calculator source program </a>
<a href= "/js" >6jquery's picture scrolling switch plugin </a>
<a href= "/js" >7mootools slider scroll bar drag value implementation </a>
<a href= "/js" &GT;8VB development of Eclipse programming software full version </a>
<a href= "/js" >9vc++ generation of random numbers and fast sorting algorithm </a>
</div>
<div>
<p> Modification Note: #div1里的高度 (72px) is the number of rows you need to display <br/>
JS 18 is the row height to scroll, 1500 that is the time required to scroll each time, the greater the speed is slower!
<a href= "/js" >js Daquan </a> Note! <p/>
</body>
<script>
var c,_=function;
With (O=document.getelementbyid ("Div1")) {innerhtml+=innerhtml; Onmouseover=_ ("c=1"); Onmouseout=_ ("c=0");
(F=_ ("If" #%18| |! c) #++,#%=o.scrollheight>>1;settimeout (f,#%18?10:1500); ". Replace (/#/g, "O.scrolltop"))) ();
</script>

This effect is entirely based on JavaScript, the best time to save a new file, and then introduced, so convenient.

The code is as follows

Copy Code

<title> Text scrolling </title>
<style type= "Text/css" >
BODY{FONT-SIZE:12PX}
a {text-decoration:none;}
</style>
<body>
<script>
var marqueecontent=new Array ();
marqueecontent[0]= ' <font color= "#0000CC" >14:25 </font><a href=http://www.baidu.com class= "f12red" >jquery dynamic loading of static Web page Instances </a><br> ';
marqueecontent[1]= ' <font color= "#0000CC" >14:25 </font><a href=/target=_blank class= "f12red" > More flashy JavaScript pictures show special effects </a><br> ';
marqueecontent[2]= ' <font color= "#0000CC" >14:25 </font><a href=# target=_blank class= "f12red" > jquery mimics the Lightbox picture effect </a><br> ';
marqueecontent[3]= ' <font color= "#0000CC" >14:25 </font><a href=# target=_blank class= "f12red" >C# Hotel Management System (vs2008+sql2005) </a><br> ';
var marqueeinterval=new Array ();
var marqueeid=0;
var marqueedelay=2000;
var marqueeheight=18;
function Initmarquee () {
var str=marqueecontent[0];
document.write (' <div id=marqueebox style= "overflow:hidden;height: ' +marqueeheight+ ' px" onmouseover= " Clearinterval (Marqueeinterval[0]) "onmouseout=" Marqueeinterval[0]=setinterval (' StartMarquee () ', MarqueeDelay) " ><div> ' +str+ ' </div></div> ');
marqueeid++;
Marqueeinterval[0]=setinterval ("StartMarquee ()", marqueedelay);
}
function StartMarquee () {
var Str=marqueecontent[marqueeid];
marqueeid++;
if (marqueeid>=marqueecontent.length) marqueeid=0;
if (marqueebox.childnodes.length==1) {
var nextline=document.createelement (' DIV ');
NEXTLINE.INNERHTML=STR;
Marqueebox.appendchild (nextline);
}
else {
MARQUEEBOX.CHILDNODES[0].INNERHTML=STR;
Marqueebox.appendchild (Marqueebox.childnodes[0]);
Marqueebox.scrolltop=0;
}
Clearinterval (marqueeinterval[1]);
Marqueeinterval[1]=setinterval ("Scrollmarquee ()", 20);
}
function Scrollmarquee () {
marqueebox.scrolltop++;
if (marqueebox.scrolltop%marqueeheight== (marqueeHeight-1)) {
Clearinterval (marqueeinterval[1]);
}
}
Initmarquee ();
</script>
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More