这篇文章主要为大家详细介绍了如何简单便捷的实现 js 间歇或无缝滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 无缝滚动
- </title>
- <style>
- *{margin:0;padding:0;} .box{width: 500px;height: 400px;margin:40px auto;background:
- #ccc;overflow: hidden;} .block{position: relative;width: 500px;height:
- 400px;overflow: hidden;} .item{height: 40px;background: red;color: #fff;line-height:
- 40px;text-align: center;} .item:nth-child(2n){background: #000}
- </style>
- <script>
- var scrollUp = (function() {
- return function(json) {
- var objScroll = document.getElementById(json.id);
- objScroll.scrollTop = 0;
- objScroll.innerHTML += objScroll.innerHTML;
- if (json.on) {
- function scrollIng() {
- if (objScroll.scrollTop >= objScroll.scrollHeight) {
- objScroll.scrollTop = 0;
- } else {
- objScroll.scrollTop++;
- }
- }
- var myScroll = setInterval(function() {
- scrollIng()
- },
- 30);
- objScroll.onmouseover = function() {
- clearInterval(myScroll);
- }
- objScroll.onmouseout = function() {
- myScroll = setInterval(function() {
- scrollIng()
- },
- 30);
- }
- } else {
- var timer;
- function startScroll() {
- timer = setInterval(function() {
- scrollUp()
- },
- 30);
- objScroll.scrollTop++;
- }
- function scrollUp() {
- if (objScroll.scrollTop % json.height == 0) {
- clearInterval(timer);
- setTimeout(startScroll, 2000);
- } else {
- objScroll.scrollTop++;
- if (objScroll.scrollTop >= objScroll.scrollHeight / 2) {
- objScroll.scrollTop = 0;
- }
- }
- }
- setTimeout(startScroll, 1000);
- }
- }
- })() window.onload = function() {
- //on:间歇滚动/无缝滚动 height:间歇滚动的高度
- scrollUp({
- on: true,
- id: 'block'
- });
- scrollUp({
- id: 'block2',
- height: 120
- });
- }
- </script>
- </head>
- <body>
- <div class="box">
- <div class="block" id="block">
- <div class="item">
- 1无缝滚动
- </div>
- <div class="item">
- 2无缝滚动
- </div>
- <div class="item">
- 3无缝滚动
- </div>
- <div class="item">
- 4无缝滚动
- </div>
- <div class="item">
- 5无缝滚动
- </div>
- <div class="item">
- 6无缝滚动
- </div>
- <div class="item">
- 7无缝滚动
- </div>
- <div class="item">
- 8无缝滚动
- </div>
- <div class="item">
- 9无缝滚动
- </div>
- <div class="item">
- 10无缝滚动
- </div>
- <div class="item">
- 11无缝滚动
- </div>
- <div class="item">
- 12无缝滚动
- </div>
- <div class="item">
- 13无缝滚动
- </div>
- <div class="item">
- 14无缝滚动
- </div>
- <div class="item">
- 15无缝滚动
- </div>
- </div>
- </div>
- <div class="box">
- <div class="block" id="block2">
- <div class="item">
- 1间歇滚动
- </div>
- <div class="item">
- 2间歇滚动
- </div>
- <div class="item">
- 3间歇滚动
- </div>
- <div class="item">
- 4间歇滚动
- </div>
- <div class="item">
- 5间歇滚动
- </div>
- <div class="item">
- 6间歇滚动
- </div>
- <div class="item">
- 7间歇滚动
- </div>
- <div class="item">
- 8间歇滚动
- </div>
- <div class="item">
- 9间歇滚动
- </div>
- <div class="item">
- 10间歇滚动
- </div>
- <div class="item">
- 11间歇滚动
- </div>
- <div class="item">
- 12间歇滚动
- </div>
- <div class="item">
- 13间歇滚动
- </div>
- <div class="item">
- 14间歇滚动
- </div>
- <div class="item">
- 15间歇滚动
- </div>
- </div>
- </div>
- </body>
- </html>
注意点:
1. 盒子块要 CSS 溢出隐藏:overflow:hidden
2. 有两个功能:间歇滚动 / 无缝滚动
3. 先复制一块一模一样的代码,无缝滚动:执行定时器一直增加 scrollTop 值,当 scrollTop 值大于盒子高度,在设置 scrollTop 为 0,重新来过。间歇滚动在此基础上加了 setTimeout,间歇执行,在 scrollTop 到达指定的 height 停止
4. 疑问:代码中 setInterval(function(){scrollIng()},30); 这样写才可以执行,setInterval('scrollIng()',30); 这样就不行,有没有大神指导下,两者有啥区别?是啥机制?
来源: http://www.phperz.com/article/17/0327/264524.html