连续滚动的制作

12lpx

12lpx

2016-01-29 11:34

连续滚动的制作,连续滚动的制作
    我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白。而下面介绍中的滚动则是连续的,毫不间断。
  下面小阳为你介绍这是如何实现的。

  为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置。结果我们看到的就是连续的滚动了。呵呵,说的就是这么简单,那做起来如何呢?我们看看是如何逐步实现的。


  这样就完成了,感觉做起来也不难吧。好了,向上滚动的就是这样,向其它方向滚动的就不用我介绍了吧?不过小阳还是做好了示例,有兴趣的朋友可以点击这里下载。 
展开更多 50%)
分享

猜你喜欢

连续滚动的制作

电脑网络
连续滚动的制作

教你用Javascript制作连续滚动的字幕

Java JAVA基础
教你用Javascript制作连续滚动的字幕

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

js jquery做的图片连续滚动代码

Web开发
js jquery做的图片连续滚动代码

PPT制作滚动文本

电脑入门
PPT制作滚动文本

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何用dreamweaver制作滚动字幕

Web开发
如何用dreamweaver制作滚动字幕

JavaScript制作滚动文本效果

Web开发
JavaScript制作滚动文本效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

《放开那三国》武将诈尸攻略

《放开那三国》武将诈尸攻略

《战国无双4-2》真田信之秘武获取攻略与视频分享

《战国无双4-2》真田信之秘武获取攻略与视频分享
下拉加载更多内容 ↓