1.本文文字轮番滚动效果支持响应式；
2.文字长度不确定时能够保证间距不变；
3.当文字的长度过长时，添加了时间的计算函数，以保证随着文字长度的增加文字的滚动速度不会过快；
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .scrollContainer{ 8 width:50%; 9 height:30px; 10 line-height:30px; 11 margin-top:10px; 12 overflow:hidden; 13 border:1px solid grey; 14 } 15 @-webkit-keyframes scroll{ 16 from { 17 margin-left:100%; 18 } 19 } 20 21 @-moz-keyframes scroll{ 22 from { 23 margin-left:100%; 24 } 25 } 26 @-ms-keyframes scroll{ 27 from { 28 margin-left:100%; 29 } 30 } 31 .scroll{ 32 height:30px; 33 overflow:hidden; 34 -webkit-animation-name: scroll; 35 -webkit-animation-delay: 1000ms; 36 -webkit-animation-duration: 1s; 37 -webkit-animation-timing-function: linear; 38 -webkit-animation-iteration-count: infinite; 39 -moz-animation-name: scroll; 40 -moz-animation-delay: 1000ms; 41 -moz-animation-duration: 5s; 42 -moz-animation-timing-function: linear; 43 -moz-animation-iteration-count: infinite; 44 -ms-animation-name: scroll; 45 -ms-animation-delay: 1000ms; 46 -ms-animation-duration: 5s; 47 -ms-animation-timing-function: linear; 48 -ms-animation-iteration-count: infinite; 49 animation-name:scroll; 50 animation-duration: 5s; 51 animation-delay: 1000ms; 52 animation-timing-function: linear; 53 animation-iteration-count: infinite; 54 } 55 .contentItem{ 56 height:30px; 57 line-height:30px; 58 float:left; 59 width:auto; 60 padding-right:20px; 61 box-sizing:border-box; 62 font-size:18px; 63 overflow:hidden; 64 } 65 .scrollBox:hover{ 66 -webkit-animation-play-state:paused; 67 } 68 </style> 69 <script src="jquery-1.11.3.min.js"></script> 70 </head> 71 72 <body> 73 <div class="scrollContainer"> 74 <div class="scrollBox" id="content"></div> 75 </div> 76 <script type="text/javascript"> 77 $(document).ready(function(){ 78 var newarry = ["博客园","我的博客园","我们的博客园","博客园的内容很丰富","写博客需要坚持"] 79 $("#content").empty(); 80 var sum=0; 81 for(var i=0;i<newarry.length;i++){ 82 var alarm = newarry[i] 83 var divStr = "<a class='contentItem' href=''>"+alarm+"</a>"; 84 $("#content").append(divStr) 85 var boxWidth=$(".contentItem").eq(i).width()+22; 86 sum+=boxWidth; 87 if(i>0){ 88 $(".scrollBox").css({"animation-duration":5+5*i+"s"},{"-moz-animation-duration":5+5*i+"s"},{"-webkit-animation-duration":5+5*i+"s"}); 89 }; 90 }; 91 $(".scrollBox").width(sum); 92 var width = $(".scrollBox").width(); 93 $(".scrollBox").css({"marginLeft":-width}); 94 $(".scrollBox").addClass("scroll"); 95 }); 96 </script> 97 </body> 98 </html>