js 兼容IE 跑马灯
时间: 2024-05-24 21:08:23 浏览: 18
兼容IE的JS跑马灯的实现方式有很多,其中一种比较常见的方式是使用定时器和DOM操作实现。具体步骤如下:
1. 首先获取跑马灯元素和其内部的文本内容;
2. 通过计算文本内容的宽度和跑马灯元素的宽度,判断是否需要滚动;
3. 如果需要滚动,则使用定时器定时更新跑马灯元素的left值,实现滚动效果;
4. 在IE浏览器中,需要使用document.documentElement.scrollLeft属性来获取页面滚动距离。
以下是一段简单的兼容IE的JS跑马灯代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS兼容IE跑马灯</title>
<style>
.marquee {
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="marquee" id="marquee">这是一段跑马灯文本内容</div>
<script>
var marquee = document.getElementById('marquee');
var text = marquee.innerText || marquee.textContent;
var speed = 50; // 滚动速度,单位为像素/秒
var timer, start, end;
// 判断是否需要滚动
if (marquee.offsetWidth < marquee.scrollWidth) {
marquee.innerHTML += marquee.innerHTML; // 复制一份文本内容
start = new Date().getTime(); // 记录开始时间
end = start + (marquee.scrollWidth / speed * 1000); // 计算结束时间
timer = setInterval(function() {
var now = new Date().getTime(); // 获取当前时间
var left = (now - start) / 1000 * speed; // 计算滚动距离
if (now >= end) { // 到达终点
clearInterval(timer);
left = marquee.scrollWidth / 2; // 滚动回起点
setTimeout(function() {
marquee.style.left = -left + 'px';
start = new Date().getTime();
end = start + (marquee.scrollWidth / speed * 1000);
timer = setInterval(arguments.callee, 20);
}, 1000);
} else { // 滚动中
marquee.style.left = -left + 'px';
if (document.documentElement.scrollLeft > 0) { // 兼容IE
document.documentElement.scrollLeft += 1;
}
}
}, 20);
}
</script>
</body>
</html>
```