Home > Developer > JavaScript
Html file
Gundong-0.1.html
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 = UTF-8"/>
<Title> code for multi-line scrolling jQuery cyclic News list </title>
<Style type = "text/css">
Ul, li {margin: 0; padding: 0}
Img {border: 0px ;}
A {text-decoration: none; border: 0px ;}
/* Scroll horizontally */
# ScrollDiv2 {border: # ccc 1px solid ;}
# ScrollDiv3 {border: # ccc 1px solid ;}
</Style>
<Script src = "../jquery-1.8.0.min.js" type = "text/javascript"> </script>
<Script src = "wordscroll-0.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$. WordScroll ({
ObjId: "scrollDiv2"
});
$. WordScroll ({
ObjId: "scrollDiv3 ",
IsHorizontal: true
});
});
</Script>
</Head>
<Body>
<Div id = "scrollDiv2">
<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>
<Li> This is the ninth line of the announcement title </li>
</Ul>
</Div>
<Div id = "scrollDiv3">
<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>
<Li> This is the ninth line of the announcement title </li>
</Ul>
</Div>
</Body>
</Html>
Js files
Wordscroll-0.1.js
Copy codeThe Code is as follows:
<P> /**
* Multi-line text scrolling: Scroll left or up
*
**/
$. Extend ({
WordScroll: function (opt, callback ){
// Alert ("suc ");
This. defaults = {
ObjId :"",
Width: 300, // The width of each row
Height: 100, // div height
LiHeight: 25, // The height of each row
Lines: 2, // The number of rows to be rolled each time
Speed: 1000, // action time
Interval: 2000, // scroll interval
PicTimer: 0, // interval handle, which is not required but used as the identifier
IsHorizontal: false // whether to scroll horizontally
}
// Parameter initialization
Var opts = $. extend (this. defaults, opt );
// Vertically and horizontally
$ ("#" Export opts.objid).css ({
Width: opts. width,
Height: opts. height,
"Min-height": opts. liHeight,
"Line-height": opts. liHeight + "px ",
Overflow: "hidden"
});
$ ("#" + Opts. objId + "li" ).css ({
Height: opts. liHeight
});
If (opts. lines = 0)
Opts. lines = 1;
// Scroll horizontally
If (opts. isHorizontal ){
$ ("#" Export opts.objid).css ({
Width: opts. width * opts. lines + "px"
});
$ ("#" + Opts. objId + "li" ).css ({
"Display": "block ",
"Float": "left ",
"Width": opts. width + "px"
});
$ ("#" + Opts. objId + "ul" ).css ({
Width: $ ("#" + opts. objId). find ("li"). size () * opts. width + "px"
}); </P> <P> // used horizontally. If one screen is not displayed, It is not rolled.
If ($ ("#" + opts. objId). find ("li"). size () <= opts. lines)
Return;
Var scrollWidth = 0-opts. lines * opts. width;
} Else {
// Do not scroll if one screen is not enough
If ($ ("#" + opts. objId ). find ("li "). size () <= parseInt ($ ("#" + opts. objId ). height ()/opts. liHeight, 10 ))
Return;
Var upHeight = 0-opts.lines * opts. liHeight;
}
// Scroll horizontally
Function scrollLeft (){
$ ("#" + Opts. objId). find ("ul: first"). animate ({
MarginLeft: scrollWidth
}, Opts. speed, function (){
For (I = 1; I <= opts. lines; I ++ ){
$ ("#" + Opts. objId ). find ("li: first "). appendTo ($ ("#" + opts. objId ). find ("ul: first "));
}
$ ("#" + Opts. objId). find ("ul: first" ).css ({marginLeft: 0 });
});
};
// Scroll vertically
Function scrollUp (){
$ ("#" + Opts. objId). find ("ul: first"). animate ({
MarginTop: upHeight
}, Opts. speed, function (){
For (I = 1; I <= opts. lines; I ++ ){
$ ("#" + Opts. objId ). find ("li: first "). appendTo ($ ("#" + opts. objId ). find ("ul: first "));
}
$ ("#" + Opts. objId). find ("ul: first" ).css ({marginTop: 0 });
});
};
// Stop automatic playback when you move the mouse over the focus chart, and start automatic playback when the mouse slides out.
$ ("#" + Opts. objId). hover (function (){
ClearInterval (opts. picTimer );
}, Function (){
Opts. picTimer = setInterval (function (){
// Judge whether to perform horizontal or vertical scrolling
If (opts. isHorizontal)
ScrollLeft ();
Else
ScrollUp ();
}, Opts. interval); // automatic playback interval, in milliseconds
}). Trigger ("mouseleave ");
}
})
</P>
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
