html 多行文字轮番,css3 文字轮番滚动效果2——改进版

1.优化了之前的代码；

2.修正了先前按照文字的条目的数量计算速度的问题，现在改为按照字符的个数计算动画执行一次需要的时间，更为精确；

3.增添了每一行JS代码的注释。

4.这个案例的用途一般为告警信息的展示：

告警的条数是不确定的，每条告警的字数是不确定的，展示告警的区域可根据浏览器的分辨率进行放大缩小；

本案例的书写满足这几个条件。

5.本案例的实现思路：

1)设置一个展示文字的div:该div的宽度用百分比来表示；

2)设置一个能够放下所有的文字条目的div:该div的宽度通过计算得到；

3)获取每一条文字信息加载到父级div中，通过循环获取到每一条信息的宽度和字符个数，然后分别求和；

4)每一条信息宽度求和得到其父级div的宽度，并将父级div的margin-left设置为其宽度的负数；而且动画是从margin-right:100%开始的，这样就完成了从右向左的动画效果。

5)根据每条信息的字符个数求和后计算出执行一次动画所需的总时间。

无标题文档

width:50%;

height:30px;

line-height:30px;

margin-top:10px;

overflow:hidden;

background-color:#333;

}

@-webkit-keyframes scroll{

from {

margin-left:100%;

}

}

@-moz-keyframes scroll{

from {

margin-left:100%;

}

}

@-ms-keyframes scroll{

from {

margin-left:100%;

}

}

.scroll{

height:30px;

overflow:hidden;-webkit-animation: scroll 5s linear 1s infinite;-moz-animation: scroll 5s linear 1s infinite;-ms-animation-name: scroll 5s linear 1s infinite;

animation-name: scroll 5s linear 1s infinite;

}

.contentItem{

line-height:30px;float:left;

padding-right:20px;

box-sizing:border-box;

font-size:18px;

overflow:hidden;

color:#E3FF00;

text-decoration:none;

}

.scrollBox:hover{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-ms-animation-play-state:paused;

animation-play-state:paused;

}

var len = newarry.length;//获取数据的条数

var wordLen = 0;//每条数据中的字符长度变量

var sum=0;//每条数据所占宽度变量

$("#content").empty();//清空数据的父级

for(var i=0;i";

$("#content").append(divStr);//数据的父级内部插入第i条数据

var boxWidth=$(".contentItem").eq(i).width()+22;

sum+=boxWidth;//求取所有数据的宽度的和

wordLen+=(newarry[i].length+2);//求取所有字符的个数，间距按照2个字符计算

};if(len>0){

$(".scrollBox").css({"animation-duration":0.5+0.5*wordLen+"s"},{"-moz-animation-duration":0.5+0.5*wordLen+"s"},{"-webkit-animation-duration":0.5+0.5*wordLen+"s"});

};//设置动画循环一次需要的总时间，每个字符为0.5s

$(".scrollBox").width(sum);var width = $(".scrollBox").width();

$(".scrollBox").css({"marginLeft":-width});//设置数据父级的左边界

$(".scrollBox").addClass("scroll");//添加动画

});

原文：http://www.cnblogs.com/mayaoshi/p/5648371.html