<! Doctype HTML>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> unlimited scrolling-demo </title>
<Style>
Body {
Font-size: 12px;
Line-Height: 24px;
Text-algin: center;
Margin: 50px;
}
*{
Margin: 0px;
Padding: 0px;
}
Ul {
List-style: none;
}
A img {
Border: none;
}
A {
Color: #333;
Text-Decoration: none;
A: hover {
color: # ff0000;
}< br>
/* intermediate style */
# moocbox {
Height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden;/* This must be added. The excess content must be hidden, avoid supporting the high middle part */
border: 1px solid red;
}< br>
<Body>
<Div id = "moocbox">
<Ul id = "con1">
<Li> <a href = "#"> 1. Learn HTML5 </a> </LI>
<Li> <a href = "#"> 2. Tab page switching effect </a> </LI>
<Li> <a href = "#"> 3. Create a rounded crystal button </a> </LI>
<Li> <a href = "#"> 4. html + CSS </a> </LI>
<Li> <a href = "#"> 5. Page number </a> </LI>
<Li> <a href = "#"> 6. Create a navigation bar menu </a> </LI>
<Li> <a href = "#"> 7. Create an information list </a> </LI>
<Li> <a href = "#"> 8. Create a drop-down menu </a> </LI>
<Li> <a href = "#"> 9. How to implement it </a> </LI>
</Ul>
<Ul id = "con2">
</Ul>
</Div>
<SCRIPT>
VaR area = Document. getelementbyid ("moocbox ");
VaR croll01 = Document. getelementbyid ("con1 ");
VaR croll02 = Document. getelementbyid ("con2 ");
Croll02.innerhtml = croll01.innerhtml;
Area. scrolltop = 0;
Function scrollup (){
If (area. scrolltop> = croll01.scrollheight ){
Area. scrolltop = 0;
} Else {
Area. scrolltop ++;
}
}
VaR stop = setinterval ("scrollup ()", 30 );
Area. onmouseover = function (){
Clearinterval (STOP );
}
Area. onmouseout = function (){
Stop = setinterval ("scrollup ()", 30 );
}
Unlimited scrolling-demo
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
