持续图片滚动字幕html,使用JavaScript实现连续滚动字幕效果的方法
我们一般都用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实现连续滚动字幕效果的方法相关推荐
- vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
目录 目标 实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例 范例效果 目标 实现类似插 ...
- 使用Javascript制作连续滚动字幕
<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一& ...
- Java写字幕滚动,使用JavaScript实现连续滚动字幕效果的方法
我们一般都用Marquee标签控制元素的滚动.但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白.而下面介绍中的滚动则是连续的,毫不间断. 下面为你介绍这是如何实现的. 为了滚动能够 ...
- 图片向上滚动字幕代码html,如何通过制作滚动字幕的软件实现这种片尾的向上滚动字幕效果...
如何制作滚动字幕 特殊滚动类字幕制作 向上向下向左向右滚动字幕制作效果 含拖动和消失全程 真是酷B了爽呆了,赶快学习吧! 电影.连续剧等影视作品片尾,都会在播放片尾曲时,出现向上滚动的字幕,显示演员表 ...
- html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下 首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝 ...
- dw自动滚动图片_Dreamweaver连续滚动图片的制作
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 横向不间断连续滚动图片,将下面代码放到你要显示的位置 //more javascript from http://www.smallrain.net do ...
- 怎么弄自动滚动的图片 html,HTML网页上连续滚动图片的制作
制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...
- html滚动字幕如何调色,如何通过制作滚动字幕的软件实现这种片尾的向上滚动字幕效果...
如何制作滚动字幕 特殊滚动类字幕制作 向上向下向左向右滚动字幕制作效果 含拖动和消失全程 真是酷B了爽呆了,赶快学习吧! 电影.连续剧等影视作品片尾,都会在播放片尾曲时,出现向上滚动的字幕,显示演员表 ...
- JavaScript 实现页面滚动动画
先预览一下实现效果: 我们使用 CSS 来实现动画,用 JavaScript 来处理触发所需的样式.我们先来创建布局. 创建布局 我们先使用 HTML 创建页面布局,然后为需要实现动画的元素分配一个通 ...
- HTML网页设计图片滚动,HTML网页上连续滚动图片的制作
制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...
最新文章
- 【总结】机器学习划分数据集的几种方法
- Syntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
- 【渝粤题库】国家开放大学2021春3894理工英语1题目
- 两个git库之间迁移_从一个git仓库迁移代码到另一个git仓库(亲测有效版)(转)...
- Gstreamer入门之Helloworld(一)
- SpringBoot请求参数传递与接收
- 点云配准ICPNDT
- Java JavaEE JavaSE JavaME JavaWEB 之间的区别与联系
- 关于Android 日历事件的实现
- WebStorm调试
- 机器学习——异常检测
- 周金瑞11.17黄金还会涨?黄金原油价格分析及白银操作建议
- PR2018模板|手机竖屏图文视频制作剪辑素材/抖音,快手等短视频创作模板
- 免费在线云服务CAD编辑软件AutoCAD易
- 怎么对BI报表展开测试?
- 鸿蒙系统越狱,Unc0ver越狱团队为其工具发布了一个新更新
- AtCoder Beginner Contest 252 A~G 题解
- IAR 中设置 CSTACK HEAP作用
- es数据频繁的更新_百亿级实时计算系统性能优化–—Elasticsearch篇
- Coding and Paper Letter(八十一)
热门文章
- ExtJS 4正式版今天发布
- Vulnerability Scanning Tools
- MySQL备份与恢复-innobackupex
- noip2018 pre——Dp
- 连接访问数据库的技术方法
- [SOA] Mule ESB 3.x 入门(二)—— 配置(spring, properties, log4j)
- 一些简单的道理和习惯
- Dynamic Set Up the Web Reference Url To WebService
- OpenCV人工智能图像处理学习笔记 第6章 计算机视觉加强之机器学习下 Hog_SVM小狮子识别
- 结构体做函数参数的进阶:嵌套一二级指针