-
Hannah 小试身手Lv3
发表于2020-8-19 09:45
悬赏1
已解决
楼主
ABI5.2.2 引用了社区大神的分析表走马灯效果脚本,求问,如何修改能使多个分析表一起进行走马灯效果?试了几种写法,都只能针对一张表进行走马灯,如下代码是其中一种写法,无法实现。麻烦帮忙看一下。
var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)
var offpos = 1; //每次向上偏移量,单位为像素(可修改)
var tabledom = document.getElementById("GRID5"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
var bodydiv = document.getElementById("HHH46"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
var tabledom = document.getElementById("GRID13");
var bodydiv = document.getElementById("HHH47");
bodydiv.style.overflow="hidden";
var position = 0;
var height = tabledom.clientHeight;
var paused = false; //是否暂停
function scroller() {
if( paused ) return;
if((0 - position ) === height ){
position = bodydiv.clientHeight;
tabledom.style.top = position + "px";
}
position -= offpos;
tabledom.style.top = position + "px";
}
setInterval("scroller()", speed);//自动滚动
//鼠标点击停止或继续(如果不需要可以去掉下面的脚本)
document.body.onmousedown = function(){
paused = !paused;
}
var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)
var offpos = 1; //每次向上偏移量,单位为像素(可修改)
var tabledom = document.getElementById("GRID5"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
var bodydiv = document.getElementById("HHH46"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
var tabledom = document.getElementById("GRID13");
var bodydiv = document.getElementById("HHH47");
bodydiv.style.overflow="hidden";
var position = 0;
var height = tabledom.clientHeight;
var paused = false; //是否暂停
function scroller() {
if( paused ) return;
if((0 - position ) === height ){
position = bodydiv.clientHeight;
tabledom.style.top = position + "px";
}
position -= offpos;
tabledom.style.top = position + "px";
}
setInterval("scroller()", speed);//自动滚动
//鼠标点击停止或继续(如果不需要可以去掉下面的脚本)
document.body.onmousedown = function(){
paused = !paused;
}
最佳答案
Hannah 发表于 2020-8-19 10:49
这是导出的分析表,给您作为一个参考。
走马灯的效果是在tab页中实现的,同时tab标签页需要自动切换。( ...
这是两个表格走马灯代码,加了1的就是要修改的变量,另外附件这个表样,文件中装入本地文件就可以使用
- var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)
- var offpos = 1; //每次向上偏移量,单位为像素(可修改)
- var tabledom = document.getElementById("GRID1"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
- var bodydiv = document.getElementById("HHH2"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
- bodydiv.style.overflow="hidden";
- var position = 0;
- var height = tabledom.clientHeight;
- var paused = false; //是否暂停
- function scroller() {
- if( paused ) return;
- if((0 - position ) === height ){
- position = bodydiv.clientHeight;
- tabledom.style.top = position + "px";
- }
- position -= offpos;
- tabledom.style.top = position + "px";
- }
- setInterval("scroller()", speed);//自动滚动
- //鼠标点击停止或继续(如果不需要可以去掉下面的脚本)
- document.body.onmousedown = function(){
- paused = !paused;
- }
- var speed1 = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)
- var offpos1 = 1; //每次向上偏移量,单位为像素(可修改)
- var tabledom1 = document.getElementById("GRID2"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
- var bodydiv1 = document.getElementById("HHH3"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
- bodydiv1.style.overflow="hidden";
- var position1 = 0;
- var height1 = tabledom1.clientHeight;
- var paused1 = false; //是否暂停
- function scroller1() {
- if( paused1) return;
- if((0 - position1 ) === height1 ){
- position1 = bodydiv.clientHeight;
- tabledom1.style.top = position1 + "px";
- }
- position1 -= offpos1;
- tabledom1.style.top = position1 + "px";
- }
- setInterval("scroller1()", speed1);//自动滚动
- //鼠标点击停止或继续(如果不需要可以去掉下面的脚本)
- document.body.onmousedown = function(){
- paused1 = !paused1;
- }
9个回答
您再命名一个新变量再给变量赋值元素id,再复制一遍代码以新变量为对象试试。您这里的代码tabledom、bodydiv变量被初始化了两次 只有第二次生效,也就是只作用再了第二次赋值的元素中。
xxxl 发表于 2020-8-19 09:58
您再命名一个新变量再给变量赋值元素id,再复制一遍代码以新变量为对象试试。您这里的代码tabledom、bodydi ...
您的意思是,如果想过要做到多个表同时走马灯,要写多个脚本,每个脚本对应一张表 是这样吗?
代码小白{:3_44:} 麻烦您再帮我看一下,我写了两个脚本,还是只有第二个才能动。
var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)
var offpos = 1; //每次向上偏移量,单位为像素(可修改)
var tabledom = document.getElementById("GRID5"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
var bodydiv = document.getElementById("HHH46"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
bodydiv.style.overflow="hidden";
var position = 0;
var height = tabledom.clientHeight;
var paused = false; //是否暂停
function scroller() {
if( paused ) return;
if((0 - position ) === height ){
position = bodydiv.clientHeight;
tabledom.style.top = position + "px";
}
position -= offpos;
tabledom.style.top = position + "px";
}
setInterval("scroller()", speed);//自动滚动
//鼠标点击停止或继续(如果不需要可以去掉下面的脚本)
document.body.onmousedown = function(){
paused = !paused;
}
var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)
var offpos = 1; //每次向上偏移量,单位为像素(可修改)
var tabledom1 = document.getElementById("GRID13"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
var bodydiv1 = document.getElementById("HHH47"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
bodydiv1.style.overflow="hidden";
var position = 0;
var height = tabledom1.clientHeight;
var paused = false; //是否暂停
function scroller() {
if( paused ) return;
if((0 - position ) === height ){
position = bodydiv1.clientHeight;
tabledom1.style.top = position + "px";
}
position -= offpos;
tabledom1.style.top = position + "px";
}
setInterval("scroller()", speed);//自动滚动
//鼠标点击停止或继续(如果不需要可以去掉下面的脚本)
document.body.onmousedown = function(){
paused = !paused;
}
Hannah 发表于 2020-8-19 10:31
代码小白04.gif 麻烦您再帮我看一下,我写了两个脚本,还是只有第二个才能动。
var speed = 10; // ...
稍等一下 我本地试一下
xxxl 发表于 2020-8-19 10:43
稍等一下 我本地试一下
这是导出的分析表,给您作为一个参考。
走马灯的效果是在tab页中实现的,同时tab标签页需要自动切换。(大屏的领导驾驶舱,分辨率较大)
Hannah 发表于 2020-8-19 10:49
这是导出的分析表,给您作为一个参考。
走马灯的效果是在tab页中实现的,同时tab标签页需要自动切换。( ...
这是两个表格走马灯代码,加了1的就是要修改的变量,另外附件这个表样,文件中装入本地文件就可以使用
- var speed = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)
- var offpos = 1; //每次向上偏移量,单位为像素(可修改)
- var tabledom = document.getElementById("GRID1"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
- var bodydiv = document.getElementById("HHH2"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
- bodydiv.style.overflow="hidden";
- var position = 0;
- var height = tabledom.clientHeight;
- var paused = false; //是否暂停
- function scroller() {
- if( paused ) return;
- if((0 - position ) === height ){
- position = bodydiv.clientHeight;
- tabledom.style.top = position + "px";
- }
- position -= offpos;
- tabledom.style.top = position + "px";
- }
- setInterval("scroller()", speed);//自动滚动
- //鼠标点击停止或继续(如果不需要可以去掉下面的脚本)
- document.body.onmousedown = function(){
- paused = !paused;
- }
- var speed1 = 10; //定时执行的间隔,影响速度,数值越大,速度越慢(可修改)
- var offpos1 = 1; //每次向上偏移量,单位为像素(可修改)
- var tabledom1 = document.getElementById("GRID2"); //获取代号为"GRID1"的表格的HTML元素(GRID1可修改为需要进行跑马灯效果的控件在展示界面的html元素id值)
- var bodydiv1 = document.getElementById("HHH3"); //获取代号为"HHH3"的容器的HTML元素(HHH15可修改为进行跑马灯效果的控件的父容器或父元素的html元素id值)
- bodydiv1.style.overflow="hidden";
- var position1 = 0;
- var height1 = tabledom1.clientHeight;
- var paused1 = false; //是否暂停
- function scroller1() {
- if( paused1) return;
- if((0 - position1 ) === height1 ){
- position1 = bodydiv.clientHeight;
- tabledom1.style.top = position1 + "px";
- }
- position1 -= offpos1;
- tabledom1.style.top = position1 + "px";
- }
- setInterval("scroller1()", speed1);//自动滚动
- //鼠标点击停止或继续(如果不需要可以去掉下面的脚本)
- document.body.onmousedown = function(){
- paused1 = !paused1;
- }