前端如何设置字体滚动，及向左移动

前端设置字体滚动很多地方都用得上，用于提示，用于广告…
赋值下面代码引入jQuery插件即可测试

向上滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
	</head>
	<style type="text/css">
		*{margin:0; padding:0;}
	    #scrollDiv{
	    	width: 500px; 
	    	height: 25px; 
	    	line-height: 25px;/*这里的height是25px*/ 
	   		margin:10px auto; 
	   		overflow:hidden;
	   		line-height: 25px;
	   		text-align: center;
	   	}
	    #scrollDiv li{
	    	height:25px; 
	    	cursor:pointer;
	    }
	</style>
</head>
<body>
	<div id="scrollDiv"> 
	      <ul> 
	         <li>有问题，找<a href="https://www.baidu.com/?tn=95149372_hao_pg" style="text-decoration:none">百度！</a></li> 
	         <li>当年兄弟依旧<a href="https://hd.my.99.com/zqyd/?BillID=241749"style="text-decoration:none">传奇</a></li> 
	          <li>好主页，<a href="https://www.hao123.com/?tn=95149372_hao_pg"style="text-decoration:none">hao123</a></li> 
	      </ul> 
	 </div>
</body>
</html>
	<script type="text/javascript">
	    function autoscroll(obj){
	        $(obj).find("ul:first").animate({marginTop:"-25px"},1000,function(){
	            $(this).css("marginTop","0px").find("li:first").appendTo(this)
	        })/*$(this).css("marginTop","0px")这里也许会有人搞不明白，为什么又设为0。因为在ul向上移25px的时候，其第一个li会添加到ul的末尾，如果ul的marginTop不设为0的话，整个ul就会慢慢移出它的父盒子，最后使得它的父盒子变空，实现不了原本想要实现的效果。*/
	    }
		$(document).ready(function(){
		    setInterval('autoscroll("#scrollDiv")',1800)
		})
	</script>
</html>

向左移动

<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>看不见我，看不见我，看不见我...！</marquee>

前端如何设置字体滚动，及向左移动

猜你喜欢