文字滚动

1. 实现效果

文字滚动实现的效果是:文字内容滚动切换

 

--------------滚动测试1--------------

--------------滚动测试2--------------

--------------滚动测试3--------------

--------------滚动测试4--------------

--------------滚动测试5--------------

--------------滚动测试6--------------

--------------滚动测试7--------------

2. 实现步骤

1、首先文档流布局中添加一个层,并搜索“定时”添加一个“定时器”元素

在文本编辑页面右键单击添加的元素,逻辑>>基本信息,元素id项输入dingshiqi1,确定。

 

2、找到要添加文字滚动的地方,打开元素模式。添加一个div。

右键单击,打开逻辑,设置参数:

基本信息:元素id:test1 、元素inline-style:position:relative;height:30px;overflow:hidden;

3、用刚才的方法继续在该div内添加一个子层级的div,右键单击子层级的div,打开逻辑,设置参数:

基本信息:元素id:test2、元素inline-style:position:absolute;width:100%;top:0px;

逻辑:当某个元素>>其他元素>>#dingshiqi1、发生某事>>其他事件>>interval1.ww、额外逻辑>>绑定数据编程>>高级编辑。

高级编辑录入内容:

var a = $("#test1").height();
var b = $("#test2").height();
var top = parseInt($("#test2").css("top"));
if((0-top) >= (b - a)){
$("#test2").css("top",0);
}else{
$("#test2").css("top",top - a);
}

4、在子层级的div内添加一个p标签,录入文字滚动的第一个内容。完成后回车键继续录入第二个,直到全部滚动内容完成。

发布后发现效果实现。

注意:当需要对滚动文字位置进行调整时,请不要直接修改滚动文字。应通过布局  col-md-1  col-md-11的方式通过控制 col-md-1的宽度来控制位置。

3. 视频演示