Scroll screen effect implemented by jquery plug-in, with the up/down flip control button

Source: Internet
Author: User

<! 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.