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

下面为你介绍这是如何实现的。

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

<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一</a>

<br> <a href="#">链接二</a>

<br> <a href="#">链接三</a>

<br> <a href="#">链接四</a>

<br> <!-- 字幕内容结束 -->

</div>

<!-- 以下是java-script代码 -->

<script language="java-script">

<!--

marqueesHeight=200; //内容区高度

stopscroll=false; //这个变量控制是否停止滚动

with(marquees){

noWrap=true; //这句表内容区不自动换行

style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大

style.height=marqueesHeight;

style.overflowY="hidden"; //滚动条不可见

οnmοuseοver=new Function("stopscroll=true"); //鼠标经过,停止滚动

οnmοuseοut=new Function("stopscroll=false"); //鼠标离开,开始滚动

}

//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:

document.write('<div id="templayer"

style="position:absolute;z-index:1;visibility:hidden"></div>');

function init(){ //初始化滚动内容

//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:

while(templayer.offsetHeight<marqueesHeight){

templayer.innerHTML+=marquees.innerHTML;

} //把"templayer"的内容的“两倍”复制回原内容区:

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;

//设置连续超时,调用"scrollUp()"函数驱动滚动条:

setInterval("scrollUp()",10);

}

document.body.οnlοad=init;

preTop=0; //这个变量用于判断滚动条是否已经到了尽头

function scrollUp(){ //滚动条的驱动函数

if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动

preTop=marquees.scrollTop; //记录滚动前的滚动条位置

marquees.scrollTop+=1; //滚动条向下移动一个像素

//如果滚动条不动了,则向上滚动到和当前画面一样的位置

//当然不仅如此,同样还要向下滚动一个像素(+1):

if(preTop==marquees.scrollTop){

marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;

}

}

-->

</script>

这样就完成了,感觉做起来也不难吧。

持续图片滚动字幕html,使用JavaScript实现连续滚动字幕效果的方法相关推荐

  1. vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)

    目录 目标 实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例 范例效果 目标 实现类似插 ...

  2. 使用Javascript制作连续滚动字幕

    <div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一& ...

  3. Java写字幕滚动,使用JavaScript实现连续滚动字幕效果的方法

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

  4. 图片向上滚动字幕代码html,如何通过制作滚动字幕的软件实现这种片尾的向上滚动字幕效果...

    如何制作滚动字幕 特殊滚动类字幕制作 向上向下向左向右滚动字幕制作效果 含拖动和消失全程 真是酷B了爽呆了,赶快学习吧! 电影.连续剧等影视作品片尾,都会在播放片尾曲时,出现向上滚动的字幕,显示演员表 ...

  5. html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果

    本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下 首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝 ...

  6. dw自动滚动图片_Dreamweaver连续滚动图片的制作

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 横向不间断连续滚动图片,将下面代码放到你要显示的位置 //more javascript from http://www.smallrain.net do ...

  7. 怎么弄自动滚动的图片 html,HTML网页上连续滚动图片的制作

    制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...

  8. html滚动字幕如何调色,如何通过制作滚动字幕的软件实现这种片尾的向上滚动字幕效果...

    如何制作滚动字幕 特殊滚动类字幕制作 向上向下向左向右滚动字幕制作效果 含拖动和消失全程 真是酷B了爽呆了,赶快学习吧! 电影.连续剧等影视作品片尾,都会在播放片尾曲时,出现向上滚动的字幕,显示演员表 ...

  9. JavaScript 实现页面滚动动画

    先预览一下实现效果: 我们使用 CSS 来实现动画,用 JavaScript 来处理触发所需的样式.我们先来创建布局. 创建布局 我们先使用 HTML 创建页面布局,然后为需要实现动画的元素分配一个通 ...

  10. HTML网页设计图片滚动,HTML网页上连续滚动图片的制作

    制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...

最新文章

  1. 【总结】机器学习划分数据集的几种方法
  2. Syntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
  3. 【渝粤题库】国家开放大学2021春3894理工英语1题目
  4. 两个git库之间迁移_从一个git仓库迁移代码到另一个git仓库(亲测有效版)(转)...
  5. Gstreamer入门之Helloworld(一)
  6. SpringBoot请求参数传递与接收
  7. 点云配准ICPNDT
  8. Java JavaEE JavaSE JavaME JavaWEB 之间的区别与联系
  9. 关于Android 日历事件的实现
  10. WebStorm调试
  11. 机器学习——异常检测
  12. 周金瑞11.17黄金还会涨?黄金原油价格分析及白银操作建议
  13. PR2018模板|手机竖屏图文视频制作剪辑素材/抖音,快手等短视频创作模板
  14. 免费在线云服务CAD编辑软件AutoCAD易
  15. 怎么对BI报表展开测试?
  16. 鸿蒙系统越狱,Unc0ver越狱团队为其工具发布了一个新更新
  17. AtCoder Beginner Contest 252 A~G 题解
  18. IAR 中设置 CSTACK HEAP作用
  19. es数据频繁的更新_百亿级实时计算系统性能优化–—Elasticsearch篇
  20. Coding and Paper Letter(八十一)

热门文章

  1. ExtJS 4正式版今天发布
  2. Vulnerability Scanning Tools
  3. MySQL备份与恢复-innobackupex
  4. noip2018 pre——Dp
  5. 连接访问数据库的技术方法
  6. [SOA] Mule ESB 3.x 入门(二)—— 配置(spring, properties, log4j)
  7. 一些简单的道理和习惯
  8. Dynamic Set Up the Web Reference Url To WebService
  9. OpenCV人工智能图像处理学习笔记 第6章 计算机视觉加强之机器学习下 Hog_SVM小狮子识别
  10. 结构体做函数参数的进阶:嵌套一二级指针