借助JQ简单的实现文字滚动效果

最新推荐文章于 2024-08-08 07:54:25 发布

羽筠

最新推荐文章于 2024-08-08 07:54:25 发布

阅读量5.4k

点赞数 1

分类专栏： HTML + CSS + JS JS

本文链接：https://blog.csdn.net/qq_16494241/article/details/51799857

版权

JS 同时被 2 个专栏收录

72 篇文章 0 订阅

订阅专栏

HTML + CSS + JS

40 篇文章 2 订阅

订阅专栏

借助JQ简单的实现文字滚动效果

带停顿的消息滚动 - 每次移动一行

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带停顿的消息滚动 - 每次移动一行</title>
<style type="text/css">
*{ margin:0; padding:0;}
.demo ul{ width:300px; height:90px; border:#e1e1e1 solid 1px; overflow:hidden;}
.demo li{ height:30px; line-height:30px; padding:0 20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
 
<body>
 
<div class="demo">
	<ul>
    	<li>一、 消息文字消息文字消息文字</li>
    	<li>二、 消息文字消息文字消息文字</li>
    	<li>三、 消息文字消息文字消息文字</li>
    	<li>四、 消息文字消息文字消息文字</li>
    	<li>五、 消息文字消息文字消息文字</li>
    	<li>六、 消息文字消息文字消息文字</li>
    </ul>
</div>
<script type="text/javascript">
	var lH = $('.demo li').height();
	setInterval(function(){
		$('.demo li').eq(0).animate({marginTop:-lH,opacity:0},'slow',function(){
			$('.demo li').eq(0).css('margin-top','').appendTo('.demo ul').animate({opacity:1});
		});
	},3000);
</script>
</body>
</html>

带停顿的消息滚动 - 每次移动整个显示区域

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带停顿的消息滚动 - 每次移动整个显示区域</title>
<style type="text/css">
* { margin: 0; padding: 0;}
.demo { width: 300px; height: 90px; border: #e1e1e1 solid 1px; overflow: hidden;}
.demo ul { padding: 0 20px;}
.demo li { height: 30px; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
 
<body>
 
<div class="demo">
    <ul>
        <li>一、 消息文字消息文字消息文字</li>
        <li>二、 消息文字消息文字消息文字</li>
        <li>三、 消息文字消息文字消息文字</li>
        <li>四、 消息文字消息文字消息文字</li>
        <li>五、 消息文字消息文字消息文字</li>
        <li>六、 消息文字消息文字消息文字</li>
        <li>七、 消息文字消息文字消息文字</li>
    </ul>
</div>
<script type="text/javascript">
	var list_len = $('.demo li').length;
	console.log(list_len);
	if (list_len > 3) {
		var list_box_h = $('.demo').height();
		setInterval(function() {
			$('.demo ul').animate({marginTop: -list_box_h}, 'slow', function() {
				$('.demo ul').css('margin-top', '');
				var $oldEle = $('.demo ul li').eq(0).prop('outerHTML') + $('.demo ul li').eq(1).prop('outerHTML') + $('.demo ul li').eq(2).prop('outerHTML');
				console.log($oldEle);
				$('.demo ul li').eq(3).prevAll().remove();
				$('.demo ul').append($oldEle);
			});
		}, 3000);
	}
</script>
</body>
</html>