当前位置:首页 > 牛逼的jQuery  >> JQuery单行文字滚动效果代码
21日

JQuery单行文字滚动效果代码

作者:皇家元林 时间:2018年01月21日 围观者: 279 人 【0条评论】

JQuery单行文字滚动代码如下:

    <script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    	function AutoScroll(obj){ 
    	$(obj).find("ul:first").animate({ 
    	marginTop:"-25px" 
    	},500,function(){ 
    	$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
    	}); 
    	} 
    	$(document).ready(function(){ 
    	setInterval('AutoScroll("#callboard")',3000) 
    	}); 
    </script>

测试代码:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="UTF-8">
    <title>JQuery单行文字滚动效果代码</title> 
    <style type="text/css"> 
    ul,li{margin:0;padding:0} 
    #callboard{height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
    #callboard li{height:25px;padding-left:10px;} 
    </style>  
    </head> 
    <body> 
    	<div id="callboard"> 
    		<ul> 
    		<li>这是公告标题的第一行</li> 
    		<li>这是公告标题的第二行</li> 
    		<li>这是公告标题的第三行</li> 
    		<li>这是公告标题的第四行</li> 
    		<li>这是公告标题的第五行</li> 
    		<li>这是公告标题的第六行</li> 
    		<li>这是公告标题的第七行</li> 
    		<li>这是公告标题的第八行</li> 
    		</ul> 
    	</div>
    	<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
    	<script type="text/javascript"> 
    		function AutoScroll(obj){ 
    		$(obj).find("ul:first").animate({ 
    		marginTop:"-25px" 
    		},500,function(){ 
    		$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
    		}); 
    		} 
    		$(document).ready(function(){ 
    		setInterval('AutoScroll("#callboard")',3000) 
    		}); 
    	</script>
    </body> 
    </html>

转自https://www.nixonli.com/wordpress/22300.html

标签:,

Leave a Reply



1686