这篇文章主要介绍了基于 javascript 实现文字无缝滚动效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
实现代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="gb2312">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>
- </title>
- <style>
- *{margin:0;padding:0;} .div{margin:100px auto 0;width:350px;height:168px;
- background:#fff;border:5px solid #ccc; border-radius:5px; overflow:hidden;padding:5px;
- cursor: pointer;} .div ul li{list-style:none;height:24px; line-height:
- 24px; text-overflow:ellipsis; font-size: 12px; white-space:nowrap; overflow:
- hidden;}
- </style>
- </head>
- <body>
- <div class="div" id="div">
- <ul>
- <li>
- 1、分看见地上放声大哭了范上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了德萨
- </li>
- <li>
- 2、分看见地上放声大哭了范上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了德
- </li>
- <li>
- 3、分看见地声大哭了上放声大哭了上放声大哭了上放声大哭了范德
- </li>
- <li>
- 4、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德
- </li>
- <li>
- 5、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德
- </li>
- <li>
- 6、分看见地上放声大哭了范声大哭了上放声大哭了
- </li>
- <li>
- 7、分看见地上放声大哭了上放声大哭了上放声大哭了范上放声大哭了上放声大哭了德
- </li>
- <li>
- 8、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德
- </li>
- </ul>
- </div>
- <script type="text/javascript">
- var area = document.getElementById('div');
- var iliHeight = 24; //单行滚动的高度
- var speed = 50; //滚动的速度
- var time;
- var delay = 1000;
- area.scrollTop = 0;
- area.innerHTML += area.innerHTML; //克隆一份一样的内容
- function startScroll() {
- time = setInterval("scrollUp()", speed);
- area.scrollTop++;
- }
- function scrollUp() {
- if (area.scrollTop % iliHeight == 0) {
- clearInterval(time);
- setTimeout(startScroll, delay);
- } else {
- area.scrollTop++;
- if (area.scrollTop >= area.scrollHeight / 2) {
- area.scrollTop = 0;
- }
- }
- }
- setTimeout(startScroll, delay)
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0411/266608.html