JavaScript实现连续滚动

最新推荐文章于 2023-09-22 11:22:39 发布

qiujiaqun

最新推荐文章于 2023-09-22 11:22:39 发布

阅读量1.4k

点赞数 1

分类专栏：动态交互语言Ajax 文章标签： javascript function 文档 firefox 脚本 chrome

动态交互语言Ajax 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

灵活的无缝滚动，帖子：连续滚动

在经典论坛搜索“连续滚动”，有203条之多。叙述的问题大都是一样的，无论marquee还是用JavaScript模仿的类似滚动效果，当滚动到尾部的时候会出现一段真空期，也就是可见范围内看到了内容的尾巴，后面是一篇空白。而连续滚动就是要求不出现这种现象，当滚动到内容尾部的时候，紧接着出现文档开头的内容，出现头追尾巴的效果。

简单的看了一下以前的解决方案，基本上都是图片的连续滚动效果，或者说，需要在脚本中对元素具体的宽度和高度做出一些计算和判断，主要目的是拿元素宽度和当前已经滚动的距离做对比，从而做出一些文档结构上的改变。我希望能够写出一个适用于文本的、与所滚动的具体元素无关的无缝滚动效果。

刚开始想的时候想了很多方法，要么太复杂了，要么实现不了（以下省略半个多小时的痛苦过程），一点头绪也没有，不过最后灵光一现想到了一个非常“不错”的办法：

通常，我们滚动元素的时候都是使用element.scrollTop++的方法(横向滚动是scrollLeft)，当滚动到内容尾部的时候，我们会发现scrollTop由于“无内容可滚”而无法继续变大，从而可以判断出已经滚动到头。

我想到的方法就在这里，此时我们可以人为地让滚动容器的innerHTML+=innerHTML，这样内容的头部就接到了尾部，从而可以继续滚动，造成连续的视觉效果。测试了一下，基本完美。

但是这个看似“不错”的方法却有一个致命的缺陷，假设滚动时间较长或者是滚动速度较快，那么就会有多次“滚到头”的情况，每次滚到头都会让innerHTML*2，那么文档占用的内存会不断增大，尤其是滚动内容有大图片的时候。所以需要对脚本的性能做进一步的优化（其实是改正错误）。

思路如下：当我们复制了一次innerHTML之后，就已经有头尾相接的效果了，因此没有必要再修改文档结构了。此时只要重现“第一次滚到头”时候的效果就可以了。至于如何重现，只要在第一次到头的时候记录下来当前的scrollTop值，然后恢复这个值就可以了。效果如下：

连续滚动示例标题

实例新闻，可以添加任何想要滚动的内容。包括图片等等。

……

连续滚动示例标题

实例新闻，可以添加任何想要滚动的内容。包括图片等等。

……

在IE8，FireFox和Chrome下效果都不错，最终的JavaScript代码和注释如下：

<script type="text/javascript">
//添加事件响应函数的函数，与本效果无关
function addEventSimple(obj,evt,fn){
	if(obj.addEventListener){
		obj.addEventListener(evt,fn,false);
	}else if(obj.attachEvent){
		obj.attachEvent('on'+evt,fn);
	}
}
addEventSimple(window,'load',initScrolling);
//保存想要滚动的容器
var scrollingBox;
var scrollingInterval;
//用于记录是否“滚到头”过一次
var reachedBottom=false;
//记录第一次滚到头时候的scrollTop
var bottom;
//初始化滚动效果
function initScrolling(){
	scrollingBox = document.getElementById("scrollText");
	//样式设置，与滚动基本无关，应该用CSS设置。
	scrollingBox.style.height = "60px";
	scrollingBox.style.overflow = "hidden";
	//滚动
	scrollingInterval = setInterval("scrolling()",50);
	//鼠标划过停止滚动效果
	scrollingBox.onmouseover = over;
	//鼠标划出回复滚动效果
	scrollingBox.onmouseout = out;	
}
//滚动效果
function scrolling(){
	//开始滚动,origin是原来scrollTop
	var origin = scrollingBox.scrollTop++;
	//如果到头了
	if(origin == scrollingBox.scrollTop){
		//如果是第一次到头
		if(!reachedBottom){
			scrollingBox.innerHTML+=scrollingBox.innerHTML;
			reachedBottom=true;
			bottom=origin;
		}else{
			//已经到头过，只需回复头接尾的效果
			scrollingBox.scrollTop=bottom;
		}
	}
}
function over(){
	clearInterval(scrollingInterval);
}
function out(){
	scrollingInterval = setInterval("scrolling()",50);
}
</script>

经典论坛JavaScript学习总结

qiujiaqun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现连续滚动

灵活的无缝滚动，帖子：连续滚动在经典论坛搜索“连续滚动”，有203条之多。叙述的问题大都是一样的，无论marquee还是用JavaScript模仿的类似滚动效果，当滚动到尾部的时候会出现一段真空期，也就是可见范围内看到了内容的尾巴，后面是一篇空白。而连续滚动就是要求不出现这种现象，当滚动到内容尾部的时候，紧接着出现文档开头的内容，出现头追尾巴的效果。简单的看了一下以前的解决方案，
复制链接

扫一扫