즉, 뉴스가 스크롤된 후 몇 초 동안 일시 중지된 후 계속 위로 스크롤되어 2 사라지면서 동시에 다음 뉴스가 스크롤되어 표시됩니다. 이번에는 주로 jquery를 사용하여 이 기능을 개발했는데, 여기에는 많은 단점이 있을 것입니다. 먼저 코드를 붙여넣고 코드를 복사하세요 코드는 다음과 같습니다. <br><%-- #news-feed <BR>{ <BR>여백: 0 0 0 10px <BR>높이: 200px ; <BR> 너비: 17em; <BR> 오버플로: <BR>} <BR>.headline <BR>{ <BR> 위치: 절대값: <BR> 상단: 210px; 🎜>오버플로: <BR>}--%> <br> $(document).ready( ) { <br>$('#news-feed').each(function() { <br>var $container = $(this); <br>$container.empty(); <br>$.get( 'feed.xml', function(data) { <br>$('rss 항목', data).each(function() { <br>var $link = $('<a></a>' ) <br> .attr('href', $('link', this).text()) <br>.text($('title', this).text()) <br>var $headline = $(' <h4></h4>').append($link) <br>var pubDate = new Date($('pubDate', this).text()) <br>var pubMonth = pubDate.getMonth () 1; <br>var pubDate.getDate(); <br>var pubYear = pubDate.getFullYear() <br>var $publication = $('<div></div> ;') <br>.addClass('publication-date') <br>.text(pubMonth '/' pubDay '/' pubYear) <br>var $summary = $('<div></div> ;') <br>.addClass('summary') <br>.html($('description', this).text()) <br>$('<div></div>') <br>.addClass('headline') <br>.append($headline, $publication) <br>.appendTo($container); <br>}) <br>var currentHeadline = 0, <br>var HiddenPosition = $container.height() 10; <br>$('div.headline').eq(currentHeadline).css('top', 0) <br>var headlineCount = $('div .headline') .length; <br>var 일시 중지; <br>var headlineRotate = function() { <br>currentHeadline = (oldHeadline 1) % headlineCount <br>$('div.headline').eq(oldHeadline ).animate( <br>{top: -hiddenPosition}, 'slow', function() { <br>$(this).css('top', HiddenPosition); <br>}); 'div.headline').eq(currentHeadline).animate( <br>{top: 0}, 'slow', function() { <br>pause = setTimeout(headlineRotate, 4000); <br>}); 🎜>oldHeadline = currentHeadline; <br>pause = setTimeout(headlineRotate, 4000); <br>$container.hover(function() { <br>clearTimeout(pause); <br>}, function( ) { <br>pause = setTimeout(headlineRotate, 3000) <br>}) <br>}) <br> ;/head> 뉴스 뉴스 자료 🎜>< /div> 따라서 높이도 200px로 설정해야 하며, 이를 초과하면 자동으로 숨겨집니다. 오버플로=숨겨졌습니다. 여기서는 Feed.xml을 데이터 소스로 사용합니다. Jquery가 xml 파일을 로드하고 읽는 것은 매우 간단합니다. xml 파일을 읽고 데이터를 꺼내어 조립하면 됩니다. html이 표시됩니다. 코드 조각은 #container에 첨부됩니다. 동시에 스크롤 표시에서 두 개의 변수를 설정해야 합니다. 하나는 현재 표시되는 제목을 기록하고 다른 하나는 제목을 기록합니다. 방금 스크롤해서 보이지 않게 되었습니다. 그리고 현재 기록이 상단에 표시되도록 합니다. 위치는 고정될 수 없다는 점에 유의해야 합니다. 마지막으로, 매번 자동으로 레코드 표시를 호출하는 함수를 작성하세요. 이러한 작업을 단순화할 수 있는 jquery용 플러그인도 많이 있습니다. 이에 대해서는 나중에 자세히 알아볼 것입니다. jquery를 배우고 싶다면 jonathan chaffer가 작성한 기본 jquery 튜토리얼을 개인적으로 추천합니다. 이 튜토리얼은 중국의 다른 사람들이 작성한 것이지만 혼합된 내용입니다.