[代码特效]利用css+js实现文字逐行向上滚动

2014-08-26 12:13:45 -0400

利用css+js实现的文字特效，简单洁实用！可以通过修改css样式，显示出不同的风格！具体如下"

HTML代码

</style>
<script language="javascript" type="text/javascript">
var s,sn=0,timer,slen,timer2;
function scrollInit(){ 
 s=getid("s1");
 s.scrollTop=0;
 slen=s.innerHTML.split("|");
 s.innerHTML="";
 for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");}
 s.innerHTML+=slen[0];
 timer2=setInterval(scrollstart,3000);
 s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";}
 s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";}
}
function scrollstart(){
 if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;}
 timer=setInterval(scrollexec,30); 
 }
function scrollexec(){
 if(sn<20){
  sn++;
  s.scrollTop++;
  }else{
   sn=0;
   clearInterval(timer);
   }  
 }
function getid(id){return document.getElementById(id);}
window.onload=scrollInit;
</script>
<div id="s1" class="scroll">欢迎来到耀眼阳光磨盘|同时也是个IT迷|本站资源仅作分享与收藏之用|本站资源会闲时更新!|欢迎留言报错!|觉得本站不错，那就交换友链吧|使用最新版UC浏览本站效果更佳哦！</div>

代码演示

«Newer Older»

Back to home

Subscribe | Register | Login | N