> 웹 프론트엔드 > JS 튜토리얼 > JQuery를 사용하여 원활한 스크롤 뉴스를 만드는 단계에 대한 자세한 설명

JQuery를 사용하여 원활한 스크롤 뉴스를 만드는 단계에 대한 자세한 설명

PHPz
풀어 주다: 2018-09-28 15:13:34
원래의
1560명이 탐색했습니다.

이 글에서는 주로 JQuery를 기반으로 끊김없는 스크롤 뉴스를 만드는 방법을 소개합니다. 참조를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

우선 여기에는 아래와 같이 매우 간결한 HTML 코드 조각이 있습니다.

<ul>
<li>你说我是好人吗,我是好人啊</li>
<li>哈哈,我真的不知道说什么了</li>
<li>生活就是应该平淡的</li>
<li>像上学一样的工作</li>
</ul>
</div>
로그인 후 복사

그럼 우리가 해야 할 일은 그냥 원활하게 스크롤되도록 만드는 것입니다.

아이디어:

먼저 JQuery를 소개하고 li 요소 목록의 첫 번째 요소 콘텐츠를 가져옵니다.

그런 다음 모든 li 요소 목록 콘텐츠를 표시합니다. 모든 li 요소의 목록 콘텐츠를 가져오는 parent() 메서드

다음으로 해야 할 일은 가져온 첫 번째 li 요소의 콘텐츠를 뒤에 있는 모든 li 요소의 목록 콘텐츠에 추가하는 것입니다.

은 위와 연결되어 있고, 다음으로 할 일은 첫 번째 li 요소를 숨기는 것입니다.

마지막으로 setInterval('scroll_news()',1000);을 사용하여 반복적으로 호출할 수 있습니다.

최종 완성 코드는 다음과 같습니다.

<script type="text/javascript">
function scrollNews(){
$(document).ready(function(){
  $(&#39;#tag li&#39;).eq(0).fadeOut("slow",function(){
   $(this).clone().appendTo($(this).parent()).fadeIn("slow");
   $(this).remove();
  });
});
}
setInterval(&#39;scrollNews()&#39;,1000);
</script>
로그인 후 복사
위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면

jQueryt 비디오 튜토리얼을 방문하세요. !

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿