When developing web programs, we usually want to scroll a news source to display the title and content abstract of news items, and each time it is a rolling advertisement similar to csdn. After a piece of news is rolled into the view, it will be paused for several seconds, and then continue to scroll up 2 to fade out the view. At the same time, the next news is then rolled into the view. This time, we mainly use jquery to develop this function. There must be many shortcomings in it. You are welcome to comment.
Paste the code first:
| Reference content is 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; Certificate ('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 (){ Watermark (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> </Head> <Body> <Form id = "form1" runat = "server"> <Div id = "sidebar"> <H3> Recent News <Div id = "news-feed"> <A href = "###"> News Releases </a> </Div> </Div> </Form> </Body> |
Let's take a look at the code. First, let's look at the style. Because we only display one news record at a time, we should set the height to one record, and set it to 200px here, in addition, if it exceeds the upper limit, overflow = hidden is automatically hidden. Here, we use feed as the data source. loading and reading xml files with xml and Jquery is very simple. You can refer to the above Writing Method to read the xml file, retrieve the data, and assemble it, the html code segment to be displayed is appended to # container. At the same time, in the scrolling display, we need to set two variables, one for recording the currently visible title, the other is used to record the title of the view that has just been rolled out. Make sure that the current record is displayed at the top of the record. Note that the position cannot be static. Finally, write a function to display the records automatically called each time. Jquery also has many plug-ins to simplify these operations and learn more later. If you want to learn jquery, I personally recommend the basic jquery tutorial, written by jonathan chaffer. It is very good and suitable for beginners. It is written by others in China and mixed up.
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
