如何做由下而上滚动字幕 由下而上滚动字幕怎么做

JavaScript022

如何做由下而上滚动字幕 由下而上滚动字幕怎么做,第1张

1、以pr为例，当我们编辑好字幕，鼠标双击想要滚动效果的字幕条。

2、进入字幕编辑窗口，点击左上角的滚动字幕图标。

3、在打开的字幕滚动设置窗口，先选择【向右游动】，点击确定。

4、关闭字幕编辑窗口，再次双击视频轨道上的字幕条。

5、再次点击字幕滚动图标，选择滚动，点击确定。

6、再次关闭字幕编辑窗口，这时再看看字幕效果，已经自动变成从上往下滚动了。

用document.getElementById(div1)获取到该div，然后操作它就行了，如果是文本上下移动完全可以使用marquee标签。

引用JS：

www.cyin.cn/js/front/supermarquee.js

HTML代码：

<div class="zuixinxuqiu" style="height: 197pxwidth: 678pxoverflow: hiddenposition: relative">

<ul>

<dl class="clearfix">

<dt class="coladdress">

成都市</dt>

</dl>

<dl class="clearfix">

<dt class="coladdress">

成都市</dt>

</dl>

<dl class="clearfix">

<dt class="coladdress">

成都市</dt>

</dl>

<dl class="clearfix">

<dt class="coladdress">

成都市</dt>

</dl>

<dl class="clearfix">

<dt class="coladdress">

成都市</dt>

</dl>

</ul>

</div>

执行JS：

$(".zuixinxuqiu").kxbdSuperMarquee({

isEqual: false,

distance: 33,

time: 5,

direction: 'up'

})

网页的滚动字幕是用<marquee></marquee>这一对标识确定的（还有JS方法等，鉴于太罗嗦，不做介绍了。如果要做上下滚动，可以用FLASH来做）。

各种滚动效果的源码如下：（可以直接拷贝到网页源码<body></body>中使用）

1.字幕至边框停住

<marquee behavior="slide" direction="left" scrollamount="9" scrolldelay="75">移动字幕自右至左停住的效果</marquee>

<marquee behavior="slide" direction="right" scrollamount="9" scrolldelay="75">移动字幕自左至右停住的效果</marquee>

2.字幕至边框移出循环

<marquee scrollamount="9" scrolldelay="75">移动字幕自右至左出屏循环的效果</marquee>

<marquee direction="right" scrollamount="9" scrolldelay="75">移动字幕自左至右出屏循环的效果</marquee>

3.字幕至边框往复循环

<marquee scrollamount="9" scrolldelay="75" behavior="alternate">移动字幕自右至左往复的效果</marquee>

<marquee direction="right" scrollamount="9" scrolldelay="75" behavior="alternate">移动字幕自左至右往复的效果</marquee>

【名词解释】

marquee|声明使用移动文字的效果

scrollamount="9"|移动文字的速度

scrolldelay="75">|移动文字的帧间隔时间

scrollamount/scrolldelay的经验值约为1/9-1/7左右

direction="right"|移动文字的方向（缺省不写本属性为向左）

behavior="slide"|字幕至边框停住的效果

behavior="alternate">|字幕至边框往复循环