jQuery實現(xiàn)簡單的間隔向上滾動效果

2024-05-06 16:16:16

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了jQuery實現(xiàn)簡單的間隔向上滾動效果,實例分析了jQuery通過animate與setInterval控制dom元素滾動特效的技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)簡單的間隔向上滾動效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

復(fù)制代碼代碼如下:

		<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
		<div id="broadcast" class="bar" name="giftactive">
		 <div style="float:left"><strong>間隔滾動效果：</strong></div>
		 <div id="demo" style="overflow:hidden;height:22px;line-height:22px;">
		     <ul class="mingdan" id="holder">
		  <li><a href="#" target="_blank">aaaaaa</a></li>
		  <li><a href="#" target="_blank">bbbbbb</a></li>
		  <li><a href="#" target="_blank">cccccc</a></li>
		  <li><a href="#" target="_blank">dddddd</a></li>
		  <li><a href="#" target="_blank">eeeeee</a></li>
		     </ul>
		 </div>
		</div>
		<script type="text/javascript">
		function AutoScroll(obj) {
		 $(obj).find("ul:first").animate({
		 marginTop: "-22px"
		 }, 500, function() {
		 $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
		 });
		 }
		 $(document).ready(function() {
		 setInterval('AutoScroll("#demo")', 1000)
		 });
		</script>