<![CDATA[刘新修]]> http://pic1.liuxinxiu.com:80/index.php zh-cn http://pic1.liuxinxiu.com:80/JS_CSS3_animation/ <![CDATA[JS+C33 间隔无缝滚动适合【图片Banner+文字滚动】]]> 刘新修 <admin@yourname.com> Tue, 28 Jul 2015 07:33:47 +0000 http://pic1.liuxinxiu.com:80/JS_CSS3_animation/  

XML/HTML代码
  1. <style>  
  2. #elUl{ border:1px #000 solid; position:absolute; right:10px; top:0;}  
  3. @-webkit-keyframes scro{from{top:0;}to{top:-30px;}}  
  4. </style>  
  5. <script type="text/javascript">  
  6. window.onload=function(){  
  7.     var elUl=document.getElementById("elUl");  
  8.     //alert(elUl)  
  9.     if(elUl!=null){  
  10.         setInterval(function(){   
  11.             elUl.style.WebkitAnimation='scro 0.5s linear forwards';  
  12.             elUl.style.MozAnimation="scro 0.5s linear forwards";  
  13.             elUl.style.msAnimation='scro 0.5s linear forwards';  
  14.             elUl.style.OAnimation='scro 0.5s linear forwards';  
  15.             elUl.style.animation='scro 0.5s linear forwards';  
  16.             //oUl.style.transform='translateY(-100px)';  
  17.             //oUl.addEventListener("webkitAnimationEnd",end);  
  18.             if(elUl.offsetTop<=-30){  
  19.                 elUl.style.WebkitAnimation='';  
  20.                 var b=elUl.children[0];  
  21.                 elUl.appendChild(b);  
  22.                 //clearInterval(timer)  
  23.             }             
  24.         },3000);  
  25.     }  
  26. }  
  27.   
  28. </script>  

注明：elUl.offsetTop 是检测DOM距离顶部的距离，如果符合条件自动清除CSS3动画，如果左右滚动Banner可以使用：elUl.offsetLeft

]]> http://pic1.liuxinxiu.com:80/JS_CSS3_animation/#blogcomment <![CDATA[[评论] JS+C33 间隔无缝滚动适合【图片Banner+文字滚动】]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://pic1.liuxinxiu.com:80/JS_CSS3_animation/#blogcomment