jQuery 제목 자동 뒤집기 구현 code_jquery

즉, 뉴스 부분이 보기로 스크롤된 후 몇 초 동안 일시 중지된 후 계속 위로 스크롤되고 2 보기에서 사라집니다. 동시에 다음 뉴스 부분이 보기로 스크롤됩니다. . 이번에는 주로 jquery를 사용하여 이 기능을 개발했는데, 여기에는 많은 단점이 있을 것입니다. 먼저 코드를 붙여넣고

코드를 복사하세요 코드는 다음과 같습니다. { 여백: 0 0 0 10px 높이: 200px ; 너비: 17em; 오버플로: } .headline { 위치: 절대값: 상단: 210px; 🎜>오버플로: }--%> $(document).ready( ) { $('#news-feed').each(function() { var $container = $(this); $container.empty(); $.get( 'feed.xml', function(data) { $('rss 항목', data).each(function() { var $link = $(' ' ) .attr('href', $('link', this).text()) .text($('title', this).text()) var $headline = $(' ').append($link)

var pubDate = new Date($('pubDate', this).text()); >var pubMonth = pubDate.getMonth() 1; var pubDay = pubDate.getDate(); var pubYear = pubDate.getFullYear() var $publication = $(' &lt ;/div> ') .addClass('publication-date') .text(pubMonth '/' pubDay '/' pubYear)

var $summary = $(' ') .addClass('summary') .html($('description', this).text())

$(' ') .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;

먼저, 스타일을 살펴보겠습니다. 한 번에 하나의 뉴스 레코드만 표시하므로 높이도 하나의 레코드로 설정해야 하며, 여기서는 200px로 설정해야 합니다. 오버플로를 자동으로 숨깁니다. 여기서는 Feed.xml을 데이터 소스로 사용합니다. Jquery가 xml 파일을 로드하고 읽는 것은 매우 간단합니다. xml 파일을 읽고 데이터를 꺼내어 조립하면 됩니다. html이 표시됩니다. 코드 조각은 #container에 첨부됩니다. 동시에 스크롤 표시에서 두 개의 변수를 설정해야 합니다. 하나는 현재 표시되는 제목을 기록하고 다른 하나는 제목을 기록합니다. 방금 스크롤해서 보이지 않게 되었습니다. 그리고 현재 기록이 상단에 표시되도록 합니다. 위치는 고정될 수 없다는 점에 유의해야 합니다. 마지막으로, 매번 자동으로 레코드 표시를 호출하는 함수를 작성하세요. 이러한 작업을 단순화할 수 있는 jquery용 플러그인도 많이 있습니다. 이에 대해서는 나중에 자세히 알아볼 것입니다. jquery를 배우고 싶다면 jonathan chaffer가 작성한 기본 jquery 튜토리얼을 개인적으로 추천합니다. 이 튜토리얼은 중국의 다른 사람들이 작성한 것이지만 혼합된 내용입니다.