div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

151 阅读 0 评论 100 点赞

我是靠谱客的博主快乐小海豚，最近开发中收集的这篇文章主要介绍div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

div+css+javascript 实现无缝滚动,marquee无缝滚动，无缝滚动,兼容firefox

用marquee实现首尾相连循环滚动效果（仅IE）：

复制代码代码如下:

 
<marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100" onmouseover="this.stop();" onmouseout="this.start();"> 
这里是要滚动的内容 
</marquee> 

用div+css+javascript实现首尾相连循环滚动效果（兼容firefox）：

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>div+css+javascript 实现无缝滚动,marquee无缝滚动，无缝滚动,兼容firefox</title> 
<style type="text/css"> 
#scrollobj { 
white-space: nowrap; 
overflow: hidden; 
width: 500px; 
} 
</style> 
</head> 
<body> 
<div id="scrollobj" onmouseover="javascript：_stop();" onmouseout="javascript：_start();"> 
这里是要滚动的内容 
</div> 
<script language="javascript" type="text/javascript"> 
<!-- 
function scroll(obj) { 

/*往左*/ 
var tmp = (obj.scrollLeft)++; 
//当滚动条到达右边顶端时 
if (obj.scrollLeft == tmp) { 
obj.innerHTML += obj.innerHTML; 
} 
//当滚动条滚动了初始内容的宽度时滚动条回到最左端 
if (obj.scrollLeft >= obj.firstChild.offsetWidth) { 
obj.scrollLeft = 0; 
} 

/*往上*/ 
//var tmp = (obj.scrollTop)++; 
//if (obj.scrollTop == tmp) { 
// obj.innerHTML += obj.innerHTML; 
//} 
//if (obj.scrollTop >= obj.firstChild.offsetWidth) { 
// obj.scrollTop = 0; 
//} 
} 
var _timer = setInterval("scroll(document.getElementById('scrollobj'))", 20); 
function _stop() { 
if (_timer != null) { 
clearInterval(_timer); 
} 
} 
function _start() { 
_timer = setInterval("_scroll(document.getElementById('scrollobj'))", 20); 
} 
//--> 
</script> 
</body> 
</html> 