收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 3064|回复: 2

我也写了个连续滚动,交流一下

[复制链接]
发表于 2008-10-19 01:38:48 | 显示全部楼层 |阅读模式
先看效果:

 提示:您可以先修改部分代码再运行


在IE8,FireFox和Chrome下效果都不错
更多解释:

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

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

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

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

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

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

思路如下:当我们复制了一次innerHTML之后,就已经有头尾相接的效果了,因此没有必要再修改文档结构了。此时只要重现“第一次滚到头”时候的效果就可以了。至于如何重现,只要在第一次到头的时候记录下来当前的scrollTop值,然后恢复这个值就可以了。详见注释,其实去掉注释和设置CSS的JS之后代码很短。

[[i] 本帖最后由 chenzhe 于 2008-10-19 01:41 编辑 ]

评分

参与人数 1威望 +1 收起 理由
caiying2007 + 1 不错,支持技术交流

查看全部评分

发表于 2008-10-19 14:51:52 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2008-10-19 15:03:47 | 显示全部楼层
能不能做,从左到右,或右到左的循环滚动!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-9-17 06:48 , Processed in 0.110072 second(s), 14 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表