jQuery文字逐行向上滚动特效代码下载
2014-12-21 15:08:18  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 6406
• 0

本例子实现了文字逐行向上滚动的效果、可以用于一些需要动态不断滚动播放的信息、另外也可以用于歌词的滚动、本Demo是通过jQuery的animate方法来实现的、先看一下Demo最后的效果

HTML代码

<div class="apple">
	<ul>
		<li><a href="#" target="_blank">你是我的小丫小苹果 </a></li>
        <li><a href="#" target="_blank">怎么爱你都不嫌多</a></li>
        <li><a href="#" target="_blank">红红的小脸儿温暖我的心窝 </a></li>
        <li><a href="#" target="_blank">点亮我生命的火 火火火火</a></li>
        <li><a href="#" target="_blank">你是我的小丫小苹果 </a></li>
        <li><a href="#" target="_blank">就像天边最美的云朵</a></li>
        <li><a href="#" target="_blank">春天又来到了花开满山坡 </a></li>
        <li><a href="#" target="_blank">种下希望就会收获</a></li>
    </ul> 
</div>

jQueryanimate代码

<script type="text/javascript"> 
  function autoScroll(obj){  
		$(obj).find("ul").animate({  
			marginTop : "-39px"  
		},500,function(){  
			$(this).css({marginTop : "0px"})
				.find("li:first").appendTo(this);  
		})  
	}  
	$(function(){  
		setInterval(´autoScroll(".maquee")´,3000);
		setInterval(´autoScroll(".apple")´,2000);
		  
	}) 
</script> 

当然在使用以上代码的时候你还得引入jQuery的库、源代码里面已经有了

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1jG7S1dc 密码: rbxe

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛