Home > Developer > JavaScript
Functional requirements:
1. 10 records are displayed in the scroll box;
2. There is a scroll up or down button, each time you click the button to scroll up or down the number of records, not automatically scroll;
3. The number of records does not scroll cyclically. If you scroll to the start or end point, the scroll stops.
The following describes a simple implementation method:
1. outer container (div) overflow: hidden, inner list (ul)
2. click the button to trigger a function to modify the list.
3. Apply animate to achieve animation Effects
The code is directly used instead.
CSS settings
Copy codeThe Code is as follows:
<Style type = "text/css">
Ul, li
{
Margin: 0;
Padding: 0;
}
# ScrollDiv
{
Width: 300px;
Height: 250px;
Min-height: 25px;
Line-height: 25px;
Border: # ccc 1px solid;
Overflow: hidden;
}
# ScrollDiv li
{
Height: 25px;
Padding-left: 10px;
}
</Style>
JQuery code
Copy codeThe Code is as follows:
<Script type = "text/javascript">
(Function ($ ){
$. Fn. extend ({
Scroll: function (opt, callback ){
If (! Opt) var opt = {};
Var _ btnUp = $ ("#" + opt. up); // Shawphy: up button
Var _ btnDown = $ ("#" + opt. down); // Shawphy: down button
Var _ this = this. eq (0). find ("ul: first ");
Var lineH = _ this. find ("li: first"). height (); // get the Row height
Var line = opt. line? ParseInt (opt. line, 10): parseInt (this. height ()/lineH, 10); // The number of rows to scroll each time. The default value is a screen, that is, the height of the parent container.
Var speed = opt. speed? ParseInt (opt. speed, 10): 600; // The rolling speed. The greater the value, the slower the speed (in milliseconds)
Var m = line; // variable used for calculation
Var count = _ this. find ("li"). length; // The total number of <li> Elements
Var upHeight = line * lineH;
Function scrollUp (){
If (! _ This. is (": animated") {// determines whether the element is in the animation state. If not, append the animation.
If (m <count) {// determines whether m is smaller than the total number.
M + = line;
_ This. animate ({marginTop: "-=" + upHeight + "px"}, speed );
}
}
}
Function scrollDown (){
If (! _ This. is (": animated ")){
If (m> line) {// determine whether m is greater than the number of screens
M-= line;
_ This. animate ({marginTop: "+ =" + upHeight + "px"}, speed );
}
}
}
_ BtnUp. bind ("click", scrollUp );
_ BtnDown. bind ("click", scrollDown );
}
});
}) (JQuery );
$ (Function (){
$ ("# ScrollDiv"). Scroll ({line: 10, speed: 500, up: "btn1", down: "btn2 "});
});
</Script>
You can set $ ("# scrollDiv "). scroll ({line: 10, speed: 500, up: "btn1", down: "btn2"}); set the Scroll button, number of rows, and Scroll speed.
Html Body content
Copy codeThe Code is as follows:
<Body>
<P style = "font-family:; font-weight: bold;">
Information scroll bar DEMO: </p>
<Div id = "scrollDiv">
<Ul>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
<Li> This is the first row of the rolling Information </li>
</Ul>
</Div>
<Button id = "btn1">
Roll up </button>
<Button id = "btn2">
Rollback </button>
</Body>
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
