核心提示:无限循环滚动,从右到左,一次一条。因为marquee里面的元素会跟在第一个显示的后面,而且当宽度增加到屏幕宽度的时候,容易出现错位显示。所以通过setInterval()方法进行循环添加,添加一条ma...
无限循环滚动,从右到左,一次一条。因为marquee里面的元素会跟在第一个显示的后面,而且当宽度增加到屏幕宽度的时候,容易出现错位显示。
所以通过setInterval()方法进行循环添加,添加一条marquee,循环完毕,删除这一条marquee 。
如果只改变marquee 里面的元素,而不新添加marquee的话,显示会在上一条显示的末尾位置开始显示,而不是右侧的初始位置显示下一条数据。
初始化调用jump(),是为了屏蔽setInterval的等待时间。
当index=len-1时,其实最后一条要显示的内容已经执行过了,最后的判断就是初始化index和执行jump(),让滚动内容连续起来。
和加载代码就先执行jump()是一样的。
要改变滚动方向、速度等需求请参考 https://www.cnblogs.com/tuyile006/archive/2007/03/28/691329.html 里面有讲解。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
.my p {
display: none
}
.fixed .on {
display: block;
background: #ccc;
color: green;
width: 200px;
height: 50px;
height: 50px;
}
.fixed {
position: fixed;
z-index: 99999;
bottom: 200px;
width: 100%;
height: 50px;
}
</style>
<body>
<p class="fixed"></p>
<p class="my">
<p>我会不停地走1</p>
<p>我会不停地走2</p>
<p>我会不停地走3</p>
<p>我会不停地走4</p>
</p>
<script>
$(window).load(function() {
jump();
setInterval(jump, 15000);
});
var index = -1;
function jump() {
var marquee = $('<marquee scrollamount=15 loop="1" width="100%" height="50px;"></marquee>');
var len = $('.my p').length;
if (index != len - 1) {
// alert(index);
$('marquee').remove();
$('.my p').eq(index + 1).clone().addClass("on").appendTo(
marquee);
marquee.appendTo('.fixed');
index++;
} else {
//alert(3333333);
$('marquee').remove();
//初始化计数器
index = -1;
//最后一次setInterval循环的下一次,相当于初始化
jump();
}
}
</script>
</body>
</html>