前端技术

当前位置:首页 > 前端技术 >

JS实现文字向上滚动代码

时间:2015-06-23        阅读:次        QQ群:182913345

JavaScript控制Li文字列表向上滚动,鼠标经过时暂停,实例代码如下:

<style>
	.yy_info{overflow:hidden;zoom:1;height:225px;background:#F0F0F0;padding:5px 0px;}
	.yy_info ul{padding:0px 15px;}
	.yy_info ul li{line-height:30px;color:#898989;overflow:hidden;zoom:1;}
	.yy_info ul li s{text-decoration:none;padding-right:20px;}
	.yy_info ul li span{float:right;}
</style>
<div class="yy_info" id="yy_info">
	<ul>
		<li><span>预约成功</span><s>刘小姐</s>韩式翘睫双眼皮</li>
		<li><span>预约成功</span><s>王小姐</s>玫瑰弧丰胸</li>
		<li><span>预约成功</span><s>李小姐</s>达拉斯综合隆鼻</li>
		<li><span>预约成功</span><s>郭小姐</s>华尔兹冰点脱毛</li>
		<li><span>预约成功</span><s>张小姐</s>华尔兹冰点脱毛</li>
		<li><span>预约成功</span><s>黎小姐</s>华尔兹冰点脱毛</li>
		<li><span>预约成功</span><s>丁小姐</s>华尔兹冰点脱毛</li>
		<li><span>预约成功</span><s>赵小姐</s>华尔兹冰点脱毛</li>
		<li><span>预约成功</span><s>孙小姐</s>华尔兹冰点脱毛</li>
		<li><span>预约成功</span><s>钱小姐</s>华尔兹冰点脱毛</li>
	</ul>
</div>
<script>
	$(function(){
		if(document.getElementById('yy_info')){
			var _ul = $("#yy_info").children('ul');
			function autoScroll(){
				_ul.animate({marginTop:'-30px'},300,function(){
					$(this).children('li').eq(0).remove().appendTo($(this));
					$(this).css('margin-top','0px');
				});
			}
			var _auto = setInterval(autoScroll,2000);
			$("#yy_info").hover(function(){
				clearInterval(_auto);
			},function(){
				_auto = setInterval(autoScroll,2000);
			});
		}
	});
</script>

上一篇:js实现tab选项卡实例代码

下一篇:CSS border-radius 圆角效果

扫一扫,更多精彩内容推送

PHP技术分享

分享PHP技术,前端技术,数据库,SEO优化,服务器,网络安全等知识,是php程序员工作学习的好帮手!

Copyright © 2013-2015.PHP技术分享 www.php520.cn  版权所有  网站地图    PHP学习交流群

免责声明:网站内容收集于互联网,本网站不承担任何由于内容的合法性及健康性所引起的争议和法律责任。

欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。 沪ICP备15014499号-2