<! 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> scroll screen effect achieved by jquery plug-in, with the up/down flip control button Xinqing webpage special effect csrcode. cn </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 = "/images/jquery1.3.2.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: "btn1", down: "btn2 "});
});
</SCRIPT>
</Head>
<Body>
<P> multi-row scrolling Demonstration: </P>
<Div id = "scrolldiv">
<Ul>
<Li>
<A Title = "super beautiful several fresh, commonly used page CSS layout color example" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/tcys/1061.htm">
Several super beautiful fresh and frequently used layout colors </a> </LI>
<Li>
<A Title = "CSS Div layer with background image on the diagonal corner" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/tcys/1060.htm">
Create a div layer with a background image on the corner of CSS </a> </LI>
<Li>
<A Title = "JS Implementation of layer expansion, layer folding effect, by default, the layer is folded" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/tcys/1059.htm">
Layer expansion and layer collapse implemented by JS, default collapse </a> </LI>
<Li>
<A Title = "Div always fixed in the bottom right corner of the page CSS Implementation Method" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/tcys/1058.htm">
CSS Implementation of Div fixed at the bottom right corner </a> </LI>
<Li>
<A Title = "javascript unknown height element vertical center Method" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/tcys/1057.htm">
Method for vertical center of unknown height elements in Javascript </a> </LI>
<Li>
<A Title = "gradient color text" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/ljwb/1056.htm">
Gradient color text </a> </LI>
<Li>
<A Title = "specify text display one by one" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/ljwb/1055.htm">
Specify text to be displayed one by one </a> </LI>
<Li>
<A Title = "rolling title bar" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/qtdm/1054.htm">
Scroll title bar </a> </LI>
<Li>
<A Title = "JS 4-screen smooth rolling slide effects" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/txtx/1036.htm">
JS 4-screen smooth slide effects </a> </LI>
<Li>
<A Title = "seamless image scrolling (portrait, landscape)" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/txtx/1035.htm">
Seamless image scrolling (vertical and horizontal) </a> </LI>
<Li>
<A Title = "hover your mouse over the border menu" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/cddh/1034.htm">
Hover your mouse over a menu with a border </a> </LI>
<Li>
<A Title = "more practical CSS control link color effect" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/ljwb/1032.htm">
Relatively practical CSS controls the link color effect </a> </LI>
<Li>
<A Title = "when the mouse contacts or leaves the image, the image size changes accordingly" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/txtx/1031.htm">
When the mouse clicks or leaves the image, the image size changes accordingly </a> </LI>
<Li>
<A Title = "Special hover prompt" target = "_ blank" href = "http://www.csrcode.cn/html/txdm/sbtx/1028.htm">
Special mouse hover tips </a> </LI>
</Ul>
</Div>
<Span id = "btn2"> page up </span>
<Span id = "btn1"> flip down </span>
</Body>
</Html>
<Br> If the scrolling page is not displayed, refresh the page first. <Br> <HR> <p align = "center"> <font color = Black> This effect is effective by <a href = "http://www.CsrCode.cn" target = "_ blank"> </a> repeated csrcode. CN is collected on the Internet. It is only used for interest and learning and is not used for commercial purposes. Source: Source Code enthusiasts </font> </P>
Http://www.csrcode.cn/html/txdm/ljwb/3035.htm
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
