1.优化了之前的代码；
2.修正了先前按照文字的条目的数量计算速度的问题，现在改为按照字符的个数计算动画执行一次需要的时间，更为精确；
3.增添了每一行JS代码的注释。
4.这个案例的用途一般为告警信息的展示：
告警的条数是不确定的，每条告警的字数是不确定的，展示告警的区域可根据浏览器的分辨率进行放大缩小；
本案例的书写满足这几个条件。
5.本案例的实现思路：
1）设置一个展示文字的div:该div的宽度用百分比来表示；
2）设置一个能够放下所有的文字条目的div:该div的宽度通过计算得到；
3）获取每一条文字信息加载到父级div中，通过循环获取到每一条信息的宽度和字符个数，然后分别求和；
4）每一条信息宽度求和得到其父级div的宽度，并将父级div的margin-left设置为其宽度的负数；而且动画是从margin-right:100%开始的，这样就完成了从右向左的动画效果。
5）根据每条信息的字符个数求和后计算出执行一次动画所需的总时间。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.scrollContainer{
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;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="scrollContainer">
<div class="scrollBox" id="content"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var newarry = ["This is the first item!","This is the second item!","This is the third item!","This is the fourth item!"];//需要展示的文字
var len = newarry.length;//获取数据的条数
var wordLen = 0;//每条数据中的字符长度变量
var sum=0;//每条数据所占宽度变量
$("#content").empty();//清空数据的父级
for(var i=0;i<len;i++){
var divStr = "<a class=‘contentItem‘ href=‘‘>"+newarry[i]+"</a>";
$("#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");//添加动画
});
</script>
</body>
</html>
时间： 2024-08-27 09:21:51