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

JavaScript012

如何做由下而上滚动字幕 由下而上滚动字幕怎么做,第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">|字幕至边框往复循环