摘要：信息滚动效果学习函数实现信息滚动相关知识点滚动的方式表示在两端之间来回滚动。表示由一端滚动到另一端，会重复。间歇性向上滚动效果展示将样式中的盒子高度设置成单行高本例为则显示一行，并间歇性向上滚动，效果展示
信息滚动效果学习
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
摘要：先初始化一下默认样式单行显示，超出隐藏固定公告栏显示区域的高度以下为了单行显示，超出隐藏封装函数使用方法改变列表的值来实现滚动效果知识点回调函数函数执行完之后，要执行的函数。 需求 最近项目中需要实现公告栏滚动显示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解决方案 1、 HTML 先建一个div层作为公告...
摘要：先初始化一下默认样式单行显示，超出隐藏固定公告栏显示区域的高度以下为了单行显示，超出隐藏封装函数使用方法改变列表的值来实现滚动效果知识点回调函数函数执行完之后，要执行的函数。 需求 最近项目中需要实现公告栏滚动显示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解决方案 1、 HTML 先建一个div层作为公告...
摘要：先初始化一下默认样式单行显示，超出隐藏固定公告栏显示区域的高度以下为了单行显示，超出隐藏封装函数使用方法改变列表的值来实现滚动效果知识点回调函数函数执行完之后，要执行的函数。 需求 最近项目中需要实现公告栏滚动显示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解决方案 1、 HTML 先建一个div层作为公告...
阅读 3438·2021-11-15 11:36
阅读 915·2021-11-11 16:55
阅读 525·2021-10-20 13:47
阅读 2677·2021-09-29 09:35
阅读 3105·2021-09-08 10:45
阅读 2457·2019-08-30 15:44
阅读 632·2019-08-30 11:10
阅读 1319·2019-08-29 13:43
