分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码

更新时间：2011年09月21日 00:20:23 作者：

这是本人2007年进行的一项研究，当时网络上没有什么既精简又实用的循环滚动代码，所以就自己琢磨了段时间，最终找到这个办法

 
<!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>分别用marquee和div+js实现首尾相连循环滚动效果</TITLE> 
</HEAD> 
<BODY> 
用marquee实现首尾相连循环滚动效果（仅IE）：<br /><br /> 
<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"><SPAN unselectable="on">这里是要滚动的内容</SPAN></MARQUEE> 
<br /><br />用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：<br /><br /> 
<DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;"><span>这里是要滚动的内容</span></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; 
} 
setInterval("scroll(document.getElementById('scrollobj'))",20); 
//--> 
</script> 
</BODY> 
</HTML> 

您可能感兴趣的文章:

循环滚动

NodeJS与Mysql的交互示例代码
实现NodeJS与Mysql的交互首先把Mysql Module装到NodeJS中，具体实现及结果截图如下，有此需求的朋友可以参考下，希望对大家有所帮助
2013-08-08
js获取location.href的参数实例代码
本文为大家介绍下js如何获取location.href的参数，需要注意的是去掉参数里最开头的?号，具体实现如下，有需要的朋友可以参考下，希望对大家有所帮助
2013-08-08
JS ES5创建常量详解
这篇文章主要介绍了JS ES5创建常量详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下
2022-07-07
Javascript 制作图形验证码实例详解
这篇文章主要介绍了Javascript 制作图形验证码实例详解的相关资料,附有实例代码及实现效果图，需要的朋友可以参考下
2016-12-12
js实现坦克大战游戏
这篇文章主要为大家详细介绍了js实现坦克大战游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
简单实现JavaScript图片切换效果
这篇文章主要教大家如何简单实现JavaScript图片切换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
JS查找数组中重复元素的方法详解
这篇文章主要介绍了JS查找数组中重复元素的方法,结合具体实例形式对比分析了javascript针对数组的遍历、判断、排序等相关操作技巧,需要的朋友可以参考下
2017-06-06
解析利用javascript如何判断一个数为素数
本文主要分享了利用javascript如何判断一个数为素数的具体实例代码，有需要的朋友可以作为参考看下
2016-12-12
尝试在让script的type属性等于text/html
我们可以在script片断中定义一个被JS调用的代码，但代码又不在页面上显示，这时，我们可以使用下面的方法;当script中的type等于text/html时我们可以做些什么呢？感兴趣的朋友可以了解下啊
2013-01-01
js原生轮播图插件制作
这篇文章主要为大家详细介绍了js原生轮播图插件制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10