【转】文字滚动效果示例

【转载】原文来源：https://www.jianshu.com/p/69e9e274db6d

文字逐行向上间隔滚动的效果

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>
    </ul> 
</div>

css样式

.apple { 
    overflow:hidden;/*重要*/
    height:50px;
    width:90%; 
    margin:30px auto;
    border:1px solid #1B96EE;
}
.apple a {
    width:100%;
    height:50px;
    line-height:50px; 
    text-indent:20px;
    color:#1B96EE;
    display:block;
    text-decoration:none;
}

样式上需要注意的问题：
1、最外面的div要有具体的高度。
2、最外面的div必须加上overflow:hidden
3、因为是获取li标签的高度作为向上滚动的距离，所以li标签的样式里最好不要有padding或者margin，如果效果冲突的话可以在li标签里加个a标签，样式写在a标签里

JS

function autoScroll (obj) {  
	$(obj).find("ul").animate({  
		marginTop : "-39px"  
		//首先把ul的margin-top=npx 向上滚动，然后马上又将他设为0 滚回来的（这是一瞬间的，看不出来）
	}, 500, function () {
		$(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
		//this指向的是ul将第一条li追加到ul里面 ,成为ul的最后一个子节点
	})  
}

$(function(){
	//启动定时器
	var timer = setInterval('autoScroll(".apple")', 2000);
	//鼠标放在区域内停止定时器
	$(".apple").mouseover(function () {
		clearInterval(timer);
	});
	//鼠标移出定时器继续
	$(".apple").mouseout(function () {
		timer = setInterval('autoScroll(".apple")', 2000);
	});

	/*注意js方法的调用与jquery的区别*/
    /*
    var myFunction = setInterval('autoScroll(".apple")', speed);//设置时间定时
	dome.onmouseover = function () {
		clearInterval(myFunction);
	}
	dome.onmouseout = function () {
		myFunction=setInterval('autoScroll("..apple")', speed);
	}
	*/
})