这是本人 2007 年进行的一项研究,当时网络上没有什么既精简又实用的循环滚动代码,所以就自己琢磨了段时间,最终找到这个办法
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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>
来源: