That is, when a piece of news rolls into a view, it pauses for a few seconds, then continues scrolling up 2, fades out of view, and the next story rolls into view. This is the main use of jquery to develop this function, there must be a lot of deficiencies, welcome to comment.
First paste the code,
Copy Code code as follows:
<style>
<%--#news-feed
{
padding:0;
margin:0 0 0 10px;
position:relative;
height:200px;
Width:17em;
Overflow:hidden;
}
. headline
{
Position:absolute;
height:200px;
top:210px;
Overflow:hidden;
}--%>
</style>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' #news-feed '). each (function () {
var $container = $ (this);
$container. empty ();
$.get (' Feed.xml ', function (data) {
$ (' RSS item ', data). each (function () {
var $link = $ (' <a></a> ')
. attr (' href ', $ (' link ', this). Text ())
. Text (' title ', this). text ());
var $headline = $ (' var pubdate = new Date ($ (' pubdate ', this). text ());
var pubmonth = pubdate.getmonth () + 1;
var pubday = Pubdate.getdate ();
var pubyear = Pubdate.getfullyear ();
var $publication = $ (' <div></div> ')
. addclass (' publication-date ')
. Text (Pubmonth + '/' + pubday + '/' + pubyear);
var $summary = $ (' <div></div> ')
. addclass (' summary ')
. HTML ($ (' description ', this). text ());
$ (' <div></div> ')
. addclass (' headline ')
. Append ($headline, $publication)
. Appendto ($container);
});
var currentheadline = 0, oldheadline = 0;
var hiddenposition = $container. Height () + 10;
$ (' div.headline '). EQ (currentheadline)-css (' top ', 0);
var Headlinecount = $ (' div.headline '). length;
var pause;
var headlinerotate = function () {
Currentheadline = (oldheadline + 1)% Headlinecount;
$ (' div.headline '). EQ (oldheadline). Animate (
{top:-hiddenposition}, ' Slow ', function () {
$ (this). CSS (' top ', hiddenposition);
});
$ (' div.headline '). EQ (currentheadline). Animate (
{top:0}, ' Slow ', function () {
Pause = settimeout (headlinerotate, 4000);
});
Oldheadline = Currentheadline;
};
Pause = settimeout (headlinerotate, 4000);
$container. Hover (function () {
Cleartimeout (pause);
}, function () {
Pause = settimeout (headlinerotate, 3000);
});
});
});
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "sidebar" >
<div id= "News-feed" >
<a href= "###" >news releases</a>
</div>
</div>
</form>
</body>
Let's Sunding the code, first look at the style, because we only display one news record at a time, so we should set the height to a record, set to 200px here, and if it is super, we will automatically hide Overflow=hidden. Here, the data source we are using feed.xml,jquery load and read XML file is very simple, you can refer to the above, by reading the XML file, take out the data, to assemble, you get the HTML snippet to display and attach to the #container, while, In the scrolling display, we need to set two variables, one to record the currently visible caption, and the other to record the caption that just scrolled out of view. And let the current record appear at the top, be sure to note that the position cannot be static. Finally, you write a function that automatically invokes the display of the record each time. jquery also has a lot of plug-ins, you can simplify these operations, and later learn more. If you want to learn jquery, personally recommend jquery basic tutorials, Jonathan Chaffer compiled, very good, very suitable for beginners, the other people in the country wrote, the inside is a mixed bag.
