Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Style type = "text/css">
Ul, li {margin: 0; padding: 0}
# ScrollDiv {width: 300px; height: 100px; min-height: 25px; line-height: 25px; border: # ccc 1px solid; overflow: hidden}
# ScrollDiv li {height: 25px; padding-left: 10px ;}
</Style>
<Script type = "text/javascript" src = "jquery-1.1.3.pack.js"> </script>
<Script type = "text/javascript">
(Function ($ ){
$. Fn. extend ({
Scroll: function (opt, callback ){
// Parameter initialization
If (! Opt) var opt = {};
Var _ btnUp = $ ("#" + opt. up); // Shawphy: up button
Var _ btnDown = $ ("#" + opt. down); // Shawphy: down button
Var timerID;
Var _ this = this. eq (0). find ("ul: first ");
Var lineH = _ this. find ("li: first"). height (), // get the Row height
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
Speed = opt. speed? ParseInt (opt. speed, 10): 500; // The rolling speed. The greater the value, the slower the speed (in milliseconds)
Timer = opt. timer //? ParseInt (opt. timer, 10): 3000; // interval of scrolling (MS)
If (line = 0) line = 1;
Var upHeight = 0-line * lineH;
// Scroll Function
Var scrollUp = function (){
_ BtnUp. unbind ("click", scrollUp); // Shawphy: unbinds the function of the up button.
_ This. animate ({
MarginTop: upHeight
}, Speed, function (){
For (I = 1; I <= line; I ++ ){
_ This. find ("li: first"). appendTo (_ this );
}
_This.css ({marginTop: 0 });
_ BtnUp. bind ("click", scrollUp); // Shawphy: click Event bound to the up button
});
}
// Shawphy: Flip-Down Function
Var scrollDown = function (){
_ BtnDown. unbind ("click", scrollDown );
For (I = 1; I <= line; I ++ ){
_ This. find ("li: last"). show (). prependTo (_ this );
}
_This.css ({marginTop: upHeight });
_ This. animate ({
MarginTop: 0
}, Speed, function (){
_ BtnDown. bind ("click", scrollDown );
});
}
// Shawphy: automatic playback
Var autoPlay = function (){
If (timer) timerID = window. setInterval (scrollUp, timer );
};
Var autoStop = function (){
If (timer) window. clearInterval (timerID );
};
// Mouse event binding
_ This. hover (autoStop, autoPlay). mouseout ();
_BtnUp.css ("cursor", "pointer"). click (scrollUp). hover (autoStop, autoPlay); // Shawphy: binds the up and down mouse event
_BtnDown.css ("cursor", "pointer"). click (scrollDown). hover (autoStop, autoPlay );
}
})
}) (JQuery );
$ (Document). ready (function (){
$ ("# ScrollDiv"). Scroll ({line: 4, speed: 500, timer: 3000, up: "btn2", down: "btn1 "});
});
</Script>
</Head>
<Body>
<P> multi-row scrolling Demonstration: </p>
<Div id = "scrollDiv">
<Ul>
<Li> This is the first line of the announcement title </li>
<Li> This is the second line of the announcement title </li>
<Li> This is the third line of the announcement title </li>
<Li> This is the fourth line of the announcement title </li>
<Li> This is the fifth line of the announcement title </li>
<Li> This is the sixth line of the announcement title </li>
<Li> This is the seventh line of the announcement title </li>
<Li> This is the eighth line of the announcement title </li>
</Ul>
</Div>
<Span id = "btn1"> down </span>
<Br/>
<Span id = "btn2"> up </span>
Parts
</Body>
</Html>
This code is just multi-line scrolling.
1. First, a <div id = "scrollDiv"> height limit is 100px, while each row is 25px. A total of only four rows can be displayed, but there are eight rows in the div. How can this problem be displayed?
The scrollDiv property contains an overflow: hidden, indicating that hidden is not displayed.
2. The second question is which four rows are displayed in <div id = "scrollDiv">, because of _ this. find ("li: first "). appendTo (_ this); cut and insert the first four rows to the end, and set the height to start from 0, so that only the first four rows can be displayed. _ This. find ("li: last"). show (). prependTo (_ this); similarly, insert the last four rows to the front.
3. The third problem is animate, a function of jquery that plays an animation effect. But _ btnDown. unbind ("click", scrollDown); why should I unbind it again. This is because when you click down, the scrollDown function will be executed. When you execute it, You Need To unbind the binding, so that when you click down again, the scrollDown function will be executed again, causing confusion, bind only after rolling.
4. If you do not click it, it will also automatically scroll. At that time, because there was a _ this. hover (autoStop, autoPlay). mouseout ();
The hover method in jQuery is a very common method. It accepts two parameters. The first parameter is the event triggered when the mouse is moved into the object, and the second parameter is triggered when the mouse is removed from the object.
5. $ ("# ScrollDiv "). scroll ({line: 4, speed: 500, timer: 3000, up: "btn2", down: "btn1"}); the Scroll is called and the function (opt, callback), but only opt is passed here. There is no callback function. The passing of parameters is also very strange. However, when it can be passed in this way, it is equivalent to an object and has been passed in.
I hope to learn more.
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
