JS+C33 间隔无缝滚动适合【图片Banner+文字滚动】

大 | 中 | 小
[不指定 2015/07/28 15:33 | by 刘新修 ]

 

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

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3686)