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