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）根据每条信息的字符个数求和后计算出执行一次动画所需的总时间。
<!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>
