用js实现字幕滚动效果.

JavaScript实现字幕滚动轮播》 HTML代码如下: <div id="dome"> <div id="dome1"> <ul> <li>站长:Onlyou</li> <li>往事无可回首,今生请多指教</li> <li>今生愿无 阅读详情

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a>
<a href="#">链接四</a>
<!-- 字幕内容结束 -->
</div>
  <!-- 以下是java-script代码 -->
  <script language="javascript">
  <!--
    marqueesWidth=500; //内容区宽度度
    stopscroll=false; //这个变量控制是否停止滚动
    with(marquees){
    noWrap=true; //这句表内容区不自动换行
    style.width=marqueesWidth; //于是我们可以将它的宽度设为0,因为它会被撑大
    style.height=0;
    
    style.overflowX="hidden"; //滚动条不可见
    onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
    onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
    }
    //这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
    document.write('<div id="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>');
    
    function init(){ //初始化滚动内容
    while(templayer.offsetWidth<marqueesWidth){
    templayer.innerHTML+=marquees.innerHTML;
    } //把"templayer"的内容的“两倍”复制回原内容区:
    marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
    //设置连续超时,调用"scrollUp()"函数驱动滚动条:
    setInterval("scrollUp()",20);
    }
    document.body.onload=init;
    preTop=0; //这个变量用于判断滚动条是否已经到了尽头
    function scrollUp(){ //滚动条的驱动函数
    if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
    preTop=marquees.scrollLeft;
    marquees.scrollLeft+=1;
    //如果滚动条不动了,则向上滚动到和当前画面一样的位置
    //当然不仅如此,同样还要向下滚动一个像素(+1):
    if(preTop==marquees.scrollLeft){
    marquees.scrollLeft=templayer.offsetHeight-marqueesWidth+1;
    }
    }
  -->
  </script>

</body>
</html>

构建自定义网页滚动字幕JavaScript实战指南 本文还有配套的精品资源,点击获取 简介:网页滚动字幕是一种吸引用户的动态效果,可用于公告、广告和新闻更新。本资源通过示例详细介绍了实现滚动字幕的相关知识点,包括HTML结构、CSS样式、JavaScript基础、jQuery库、自定义滚动函数、事件监听、响应式设计和性能优化。开发者将学习如何使用现代技术创建和优化滚动字幕,适用于各种网页项目。 1. HTML结构定... 阅读详情

相关推荐

SubPlayerJS:使用JavaScript制作HTML5视频标签的字幕播放器

SubPlayerJS SubPlayerJS是一个用JavaScript编写的库,用于在视频中显示字幕。 它使用了经过修改HTML5视频播放器。 目标 我对该项目的目标是创建一个通用的字幕视频播放器,该播放器支持大多数常用的基于文本的字幕格式,例如.ass,.srt,.vtt以及普通的.txt。 主要焦点在于.ass(变电站Alpha)支持。 请注意,视频文件中不支持嵌入字幕! 但是正在开发中,请看演示! 版本 0.0.1-初始版本 0.1.0-稳定的工作版本: - fixed bug when skipping backwards subtitle would dissapear - jQuery auto dynamic load added - Materializecss stylsheet auto dynamic load added 0.2.0 -

原生JS实现marquee 滚动字幕效果,完美解决频闪问题

marquee标签在HTML5 中已经不再受支持 但是我们很多时候会用到滚动字幕的样式,所以就采用了实时动态改变元素位置的方式来实现此功能,在实现的时候用过HTML DOM setInterval() 方法,但是会出现频闪的现象,初步估计是因为其他js的时间对其产生影响,后来改用了window.requestAnimationFrame()方法完美解决问题。 关于window.reques...

qq_34797972的博客 6888

JS实现动态字幕效果

JS实现动态字幕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TESTJS</title> <script type="text/javascript"> var message ...

qq_37400096的博客 1570

JS动态效果之 【侧边栏滚动固定效果

侧边栏滚动固定效果 滚动与scroll有关,我们使用 scroll 系列的相关属性可以动态的得到自己的大小scrollWidth; scrollHight(不含边框)、滚动距离scrollTop;scrollLeft等。 tips: 上面四个方法返回的值都是数值类型,不含单位的px的; 滚动是页面的滚动,我们知道当浏览器界面显示内容不全的时候就会出现滚动条,滚动条向下拉就能看到下方被隐藏的内容,同时我们当时页面的最上方也就被遮盖住了,想看到上方被遮盖住的部分,就需要滚动条向上拉。 在这里说一个方法能够获上

egg_er的博客 3606

JavaScript学习(二十二)——制作滚动字幕

字幕滚动事件主要时在&lt;marquee&gt;标记中使用,该标记虽然不能实现多样化的字幕滚动效果,当应用起来十分简单,可以使用最少的语句来实现字幕滚动效果。 onbounce事件 onbounce事件是在&lt;marquee&gt;标记中的内容滚动到上下或左右边界时触发的事件处理程序,该事件只有在&lt;marquee&gt;标记的behavior属性设为alternate时才有效。例...

苦作舟的空城机 1964

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

我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白。而下面介绍中的滚动则是连续的,毫不间断。下面为你介绍这是如何实现的。为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动滚动到最下方时,理论上不能再往下滚动了,...

weixin_35823536的博客 613

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

我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白。而下面介绍中的滚动则是连续的,毫不间断。下面为你介绍这是如何实现的。为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动滚动到最下方时,理论上不能再往下滚动了,...

weixin_33143629的博客 465

一个js实现简单的字幕滚动效果

华恩IT function doRoll(){ var _wrap=$("#roll");//定义滚动区域 var _interval=2000;//定义滚动间隙时间 var _moving;//需要清除的动画 _wrap.hover(function(){ clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动 },function(){ _moving

u014071823的专栏 2437

Linux额程序实现字幕滚动,Linux_javascript实现滚动带链接的字幕,  大家都见过字幕,但字幕 - phpStudy...

javascript实现滚动带链接的字幕大家都见过字幕,但字幕的形式却是活波的,变化的,今天我们使用JS实现滚动带连接的字幕,例子源码如下:<script language=JavaScript><!--var index = 3link = new Array(3);text = new Array(3);link[0] ='http://www.cpcw.com/'link[1] ='htt...

weixin_34889287的博客 299

滚动字幕效果

1.页面上漂浮字体大小不一、颜色不一,从左向右滚动的弹幕; 2.底部中间有一个发送功能,可以发送新的弹幕; 3.底部的发送部分可以向下收起和弹出。

self_correction的博客 492

js+div实现跑马灯效果,替代marquee实现无缝滚动

CSS .pad_right { padding-left: 15px; } #scroll_div { height: 26px; line-height: 26px; overflow: hidden; white-space: nowr...

yehaifanxing的专栏 6261

html字幕来回滚动,JS实现的文字间歇循环滚动效果完整示例

本文实例讲述了JS实现的文字间歇循环滚动效果。分享给大家供大家参考,具体如下:先来看看运行效果:具体代码如下:www.jb51.net - 间歇循环滚动#box{height:240px;width:300px;margin:0 auto;border:1px solid #0066FF;overflow:hidden;padding-bottom:20px;}#box li{color:#333...

weixin_39862669的博客 533

漏刻有时物联网刷脸支付可视化大屏(柱图、支付统计、数字滚动插件numberAnimate.js、jquery.liMarquee.js插件、横向滚动字幕代码)

是一个用于在网页上创建动画数字效果JavaScript 插件。它可以帮助开发者轻松实现数字的渐变、过渡、闪烁等动画效果。以下是下面是

挖掘大数据价值,让决策者快速洞悉趋势,让大众读懂数据背后的故事。 722

原生js实现字幕滚动

使用css和原生js实现字幕滚动效果,无缝衔接 效果 原理 容器设置固定宽度,超出部分隐藏,滚动部分绝对定位并通过定时器改变位置 实现 html部分 &lt;div class="scroll"&gt; &lt;span&gt;这里是要现实的滚动内容......&lt;/span&gt; &lt;/div&gt; css部分 .scroll { width: 400...

a8725585的博客 4374

原生JS 实现字幕滚动

原生JS 实现字幕滚动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动字幕</title> <style> #marquee { color: red; display: block; width: 96%; h

小肉包的博客 2457

html滚动字幕上下,js、jQuery实现文字上下无缝轮播、滚动效果

因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间。原生JS版本文字上下无缝轮播* {margin: 0;padding: 0;}#container{width: 60%;margin: 100px auto;position: relative;height: 200px;overflow: hidden;}...

weixin_28871989的博客 486

小程序中滚动字幕

在录像时需要在屏幕上提示字幕,整体匀速向上滚动

qdm13209211861的博客 959

html滚动字幕鼠标悬停,js实现文字垂直滚动和鼠标悬停效果

本文实例介绍了文字垂直滚动效果,主要运用了setInterval(function(){}, time);方法,分享给大家供大家参考,具体内容如下HTML布局:荐1高档社区,经典户型,机会难得,稍纵即逝!仅售66万!66万 3室2厅1卫 120㎡荐2高档社区,经典户型,机会难得,稍纵即逝!仅售66万!66万 3室2厅1卫 120㎡荐3高档社区,经典户型,机会难得,稍纵即逝!仅售66万!66万 ...

weixin_34669890的博客 710
上一篇: C#开发小技巧--对Text控件增量赋值的代码优化
下一篇: 多级下拉菜单(动态)
louisp
博客等级 码龄21年 5粉丝 44原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值