이 글에서는 jQuery를 기반으로 한 한 줄짜리 공지 활동 캐러셀 효과를 예제 코드를 통해 소개하고 있습니다. 코드가 간단하고 이해하기 쉬우며, 필요한 친구들이 참고할 수 있으면 좋겠습니다. 그것은 모두에게 도움이 될 수 있습니다.
더 이상 헛소리하지 마세요. 구체적인 코드는 다음과 같습니다.
<p class="lunbo123" style="position:relative;height: 45px;overflow: hidden;background-color:white" ;> <ul id="myul" style="margin:6px;padding:0px;position:absolute;width: 700px; height: auto;"> <li> <a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; "> <span style="height:36px ; line-height: 36px;">公告test1 </span> </a> </br> </li> <li> <a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; "> <span style="height:36px ; line-height: 36px;">活动test2 </span> </a> </br> </li> </ul> </p> <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script> <script> function lunbo123(id, height) { var ul = $(id); var liFirst = ul.find('li:first'); $(id).animate({ top: height }).animate({ "top": 0 }, 0, function() { var clone = liFirst.clone(); $(id).append(clone); liFirst.remove(); }) } setInterval("lunbo123('#myul','-45px')", 2500) </script> <style> #myul { list-style-type: none; width: 300px; height: 45px; font-size: 20px; } </style>
관련 권장 사항:
공지사항을 위아래로 스크롤하는 효과를 얻기 위한 10줄의 js 코드
jQuery를 사용하여 일정한 간격으로 페이지에 팝업 광고 효과를 구현하는 방법
자바스크립트를 사용하여 광고 배너 반복 효과를 구현하는 방법 튜토리얼
위 내용은 jQuery로 구현된 한 줄 공지 활동 캐러셀 효과 공유 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!