资讯专栏INFORMATION COLUMN

js信息滚动

苏丹 / 1660人阅读

摘要:信息滚动效果学习函数实现信息滚动相关知识点滚动的方式表示在两端之间来回滚动。表示由一端滚动到另一端,会重复。间歇性向上滚动效果展示将样式中的盒子高度设置成单行高本例为则显示一行,并间歇性向上滚动,效果展示

信息滚动效果学习

marquee函数实现信息滚动

相关知识点:

1.behavior滚动的方式

alternate:表示在两端之间来回滚动。

scroll:表示由一端滚动到另一端,会重复。

slide:表示由一端滚动到另一端,不会重复。

2.direction滚动的方向down up left right

3.loop滚动的次数(当loop=-1表示一直滚动下去,默认为-1)

4.scrollamount设定活动字幕的滚动速度

JS实现信息滚动

相关知识点:

1.innerHTML

2.sctollTop 设置或获取位于给定对象最顶端与窗口中可见内容的最顶端之间的距离,即上边灰色的内容。

3.scrollHeight 返回元素的完整高度

4.offsetHeight 获取元素的可见高度值

5.setInterval() 在执行时,从载入页面后每隔指定时间执行代码

6.clearInterval() 该方法可取消由setInterval()设置的交互时间

循环滚动实现:

js代码实现:

var rol = document.getElementById("roll"),

con1 = document.getElementById("con1"),

con2 = document.getElementById("con2");

con2.innerHTML = con1.innerHTML; //克隆con1内容给con2

function rolup() {

if(rol.scrollTop >= con1.scrollHeight) {

rol.scrollTop = 0;

} else {

rol.scrollTop++;

}

}

var time = 50;

var myrol = setInterval("rolup()", time);

rol.onmouseover = function() {

clearInterval(myrol);

}

rol.onmouseout = function() {

myrol = setInterval("rolup()", time);

}

间歇性循环滚动实现:

js代码实现:

var rol = document.getElementById("roll");

var iLiHeight = 48;//滚动高度,行高为24,实现一次滚动两行

rol.innerHTML += rol.innerHTML;//克隆一个ul

rol.scrollTop = 0;

var speed=50;//速度0.05s

var delay = 2000;//延迟时间2s

var time;

function startMove(){

rol.scrollTop++;

time = setInterval("scrollUp()",speed);

}

function scrollUp(){

//rol.scrollTop++;

if(rol.scrollTop % iLiHeight == 0){

clearInterval(time);

setTimeout("startMove()",delay);

}else{

rol.scrollTop++;

if(rol.scrollTop >= rol.scrollHeight/2){

rol.scrollTop = 0;

}

}

}

setTimeout("startMove()",delay);

上例中,可以调节滚动高度(iLiHeight)实现以n行为单位间歇性滚动,也可以设置向上滚动的速度 (speed)和每次开始滚动的延迟时间(setTimeout()函数中的delay)。

间歇性向上滚动效果展示:

将css样式中的盒子高度设置成单行高(本例为24px)则显示一行,并间歇性向上滚动,效果展示:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89036.html

相关文章

  • 10行js代码搞定滚动公告

    摘要:先初始化一下默认样式单行显示,超出隐藏固定公告栏显示区域的高度以下为了单行显示,超出隐藏封装函数使用方法改变列表的值来实现滚动效果知识点回调函数函数执行完之后,要执行的函数。 需求 最近项目中需要实现公告栏滚动显示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解决方案 1、 HTML 先建一个div层作为公告...

    curried 评论0 收藏0
  • 10行js代码搞定滚动公告

    摘要:先初始化一下默认样式单行显示,超出隐藏固定公告栏显示区域的高度以下为了单行显示,超出隐藏封装函数使用方法改变列表的值来实现滚动效果知识点回调函数函数执行完之后,要执行的函数。 需求 最近项目中需要实现公告栏滚动显示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解决方案 1、 HTML 先建一个div层作为公告...

    TesterHome 评论0 收藏0
  • 10行js代码搞定滚动公告

    摘要:先初始化一下默认样式单行显示,超出隐藏固定公告栏显示区域的高度以下为了单行显示,超出隐藏封装函数使用方法改变列表的值来实现滚动效果知识点回调函数函数执行完之后,要执行的函数。 需求 最近项目中需要实现公告栏滚动显示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解决方案 1、 HTML 先建一个div层作为公告...

    Imfan 评论0 收藏0
  • 原生js小结

    摘要:获得相应的元素集合,返回数组。在前面增加删除该节点中的某一个节点。将某一节点替换成新的节点。为节点,为节点,代表节点,代表节点,代表节点当前节点为文本节点时的文本内容节点的标签名。获得该节点内所有子节点的信息。 很多时候小项目都不要使用jquery等类似的DOM封装库,需要自己简单的封装下,这就要求我们熟练地掌握原生的JavaScript的DOM操作,这里做个总结 高宽属性 对于win...

    TerryCai 评论0 收藏0
  • 原生js小结

    摘要:获得相应的元素集合,返回数组。在前面增加删除该节点中的某一个节点。将某一节点替换成新的节点。为节点,为节点,代表节点,代表节点,代表节点当前节点为文本节点时的文本内容节点的标签名。获得该节点内所有子节点的信息。 很多时候小项目都不要使用jquery等类似的DOM封装库,需要自己简单的封装下,这就要求我们熟练地掌握原生的JavaScript的DOM操作,这里做个总结 高宽属性 对于win...

    yedf 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<