兼容ie7的无限滚动

最近项目里需要实现水平无限滚动功能，我的第一想法就是利用animation无限播放动画并控制播放结束显示或者使用transform搭配transition进行平移。但不幸的是这个项目需要兼容ie7!!!!于是网上各种查资料发现还是有不少方法能实现，下面列举几个实现方法：

# 方法一：使用JQuery的kxbdmarquee插件

kxbdmarquee下载地址引入Jquery和kxbdmarquee插件，基础html结构如下

<head>
	<script type="text/javascript" src="./js/jquery.js"></script>
	<script type="text/javascript" src="./js/jquery.kxbdmarquee.min.js"></script>
</head>
<body>
<div class="scroll-con" id="scroll-con" >
	<ul >
		<li></li>
		<li></li>
	</ul>
</div>
</div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13

查看插件源码，他为我们提供了一下几个方法：

kxbdMarquee方法，JQuery获取滚动的窗体dom元素调用该方法，参数为defaults属性对象。这里的dom元素就是scroll-con
setDefaults方法，动态修改滚动属性。
defaults属性，设置滚动方向、数量、延迟等参数参数说明： |名称 |默认值 |说明| |direction |"left" |滚动方向。可设置为："left", "right", "up", "down" | |isEqual |true |所有滚动的元素长宽是否相等。可设置为：true, false | |loop |0 |循环滚动次数，0 表示无限循环 | |scrollAmount |1 |步长(px) | |scrollDelay |20 |时长(ms) | 使用方法很简单，在js代码中调用kxbdMarquee方法并传入defaults属性对象

 $('#scroll-con').kxbdMarquee({
 	scrollAmount: 2,
 	scrollDelay: 10
 });

1
2
3
4

# 方法二：使用left进行位移

原理很简单，准备两份一样innerHtml列表group1、group2，为了保证横向排列使用display:inline-block; zoom:1;*display:inline;在ie上兼容inline-block。内容准备完毕，我们通过控制group1的left属性变化实现水平移动，注意我这里使用的是relative所以两个group需要同时移动。当group1完全移除也就是group2到达group1的位置时重置两个group的left属性，以此来达到无限滚动的目的代码如下：

<div id="scroll-con" style="white-space: nowrap;">
	<ul id="group1" style="position: relative; display:inline-block; zoom:1;*display:inline;">
		<li class="item">
		</li>
	</ul>
	<ul id="group2"  style="position: relative; display:inline-block; _zoom:1;*display:inline;">
		<li class="item">
		</li>
	</ul>
</div>
<script>
var left = 0;
function marqueee(){
	if(document.getElementById("group2").offsetWidth+left<=0){
		left = 0;
		document.getElementById("group1").style.left = left;
		document.getElementById("group2").style.left = left;
	}
else{
	left-=1;
	document.getElementById("group1").style.left = left;
	document.getElementById("group2").style.left = left;
}}
var timem = setInterval(marqueee, 30)
document.getElementById("scroll-con").onmouseover=function() {clearInterval(timem)}
document.getElementById("scroll-con").onmouseout=function() {timem=setInterval(marqueee,30)}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

虽然功能实现了但还是想说一下：可恶的ie

#js

上次更新: 2025/09/05, 8:09:00

← CSS sprite雪碧图制作与使用节流防抖→