Javascript制作连续滚动字幕

JavaScript 动态网页实例 —— 文字移动 介绍文字使用的特殊效果。本章介绍文字的移动效果,主要包括:文字的垂直滚动、文字的渐隐渐显、文字的闪烁显示、文字的随意拖动、文字的坠落显示、页面内飘动的文字、漫天飞舞的文字、文字的下落效果。对于这些效果,读者只需稍加修改,就可以应用在自己的页面设计中。 阅读详情

<div id="marquees">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="left1">
<a class="rlk" target="_blank" href="/a/20060531/001533.htm">河南首次规范交警执法:不得在高速设点查车</a><span class="text06">(31日12:16)</span><br><a class="rlk" target="_blank" href="/a/20060531/001465.htm">河北雄县特大持枪抢劫案告破 缴获冲锋枪手雷</a><span class="text06">(31日11:26)</span><br><a class="rlk" target="_blank" href="/a/20060531/001462.htm">黑龙江内蒙古森林火灾扑救工作取得明显进展</a><span class="text06">(31日11:24)</span><br><a class="rlk" target="_blank" href="/a/20060531/001523.htm">联合国:印度成为全球感染艾滋病人数最多国家</a><span class="text06">(31日12:05)</span><br><a class="rlk" target="_blank" href="/a/20060531/001402.htm">李福全被任命为江苏司法厅长 曾任南京副市长</a><span class="text06">(31日11:00)</span><br><a class="rlk" target="_blank" href="/a/20060531/001414.htm">华北多阵雨或雷阵雨 江南华南地区持续降雨</a><span class="text06">(31日11:06)</span><br><a class="rlk" target="_blank" href="/a/20060531/001390.htm">印尼社会事务部称地震死亡人数升至5900人</a><span class="text06">(31日10:56)</span><br><a class="rlk" target="_blank" href="/a/20060531/001281.htm">山西左云矿难进入第十三天 被困矿工仍无消息</a><span class="text06">(31日10:31)</span><br><a class="rlk" target="_blank" href="/a/20060531/001279.htm">韩国地方选举开始 大国家党支持率高</a><span class="text06">(31日10:29)</span><br><a class="rlk" target="_blank" href="/a/20060531/001323.htm">持续高温引发新疆阿勒泰融雪性洪灾</a><span class="text06">(31日10:43)</span>
</td></tr></table>

</div>

<script language="javascript">
<!--
marqueesHeight=90;//内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=243; //这句表内容区宽度
style.height=marqueesHeight;
style.overflowY="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;height:60px"></div>');


function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
//把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;

//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",30);
}
document.body.onload=init;
preTop=0;  //这个变量用于判断滚动条是否已经到了尽头

function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1;  //滚动条向下移动一个像素
if(preTop==marquees.scrollTop){
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>

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

相关推荐

css+js滚动字幕

html css+纯js实现无缝连接循环的滚动字幕,内有注释

JavaScript 自定义自动滚动文字,两种方式

TextAutoScroll.jsfunction TextAutoScroll() { var _this = this; this.ScrollTypeEnum = { LeftRight: 0,//左右滚动 Left: 1,//像左滚动 }; this.space = 4;//文本添加的空格数 var spaceStr = ""; this.speed = 20;//速度...

杨克进的博客 3145

html,css,javascript实现滚动字幕

【代码】html,css,javascript实现滚动字幕

subsistent的博客 823

JavaScript 实现滚动弹幕

JavaScript 实现滚动弹幕

O_osange的博客 2098

使用Javascript制作连续滚动字幕

  http://www.sina.com.cn 2003/04/18 14:20 太平洋电脑网  

放飞梦想 477

JavaScript制作连续滚动字幕

代码如下: <div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接1</a> <br> <a href="#">链接2</a> <br> <a href="#">链接3</a> <br&gt...

weixin_30515513的博客 137

Javascript制作连续滚动的链接或字幕

 div id="marquees">  这些是字幕的内容,你可以任意定义 --> a href=连接地址>链接1a>br> a href="连接地址">链接2a>br> a href="连接地址">链接3a>br> a href="连接地址">链接4a>br>  字幕内容结束 -->div> 以下是javascript代码 -->script>...script language="ja

742

用js实现字幕滚动效果.

"http://www.w3.org/TR/html4/loose.dtd">无标题文档 链接一 链接二 链接三链接四           marqueesWidth=500; //内容区宽度度    stopscroll=false; //这个变量控制是否停止滚动    with(marquees){    noWrap=true; //这句表内容区不自动换行    style.width=m

Welcome to Chandler.C's blog 5671

Javascript 实现连续可停止 滚动字幕

前几天要实现一个滚动字幕,先用Marquee标签控制元素的滚动发现到每滚完一幕,就会出现一次空白,不能满足需求,上网找了下没有其他控件可以用,就用js实现了个可以连续滚动字幕滚动速度,时间间隔,滚动去高度等都可以方便的配置,内容可以从数据库中读取来填充。首先显示区的高度是小于内容的高度,不然要滚动就没有意义了(废话)为了连续滚动不间断,原始的内容是不够的,所以初始化滚动方法的时候克隆了

H@ppy 1377

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

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

weixin_35823536的博客 613

html 字幕飘动效果,html 滚动字幕 制作滚动字幕效果 参数

制作滚动字幕效果:marquee标签 如下:<MARQUEE direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=4> </marquee>参数说明:direction滚动方向:up向上滚动,down向下滚动,left向左滚动,right向右滚动behavior滚动方式:scroll绕来绕去,slid...

weixin_39588983的博客 2664

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

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

苦作舟的空城机 1964

原生JS 实现字幕滚动

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

小肉包的博客 2457
上一篇: javascript动态添加删除文本框
下一篇: 一个很感人的故事
meiwn
博客等级 码龄24年 0粉丝 30原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值