js实现间歇滚动内容

从yahoo上提取的,效果见 http://music.cn.yahoo.com/search?pid=ysearch&p=ustonet&mimetype=all&source=ysmi_hsch_r 即在搜索不到内容(抱歉,无法找到与“ ustonet”相符的音乐搜索结果。)时,右边提示的“别人在搜什么”。

觉得这个比较适合手头正在做的新闻系统,所以借用代码了。
move.js


scrollVertical.prototype.scrollArea
=null;scrollVertical.prototype.scrollMsg=null;scrollVertical.prototype.unitHeight=0;scrollVertical.prototype.msgHeight=0;scrollVertical.prototype.copyMsg=null;scrollVertical.prototype.scrollValue=0;scrollVertical.prototype.scrollHeight=0;scrollVertical.prototype.isStop=true;scrollVertical.prototype.isPause=false;scrollVertical.prototype.scrollTimer=null;scrollVertical.prototype.speed=2000;scrollVertical.prototype.isMoz=function(){return navigator.userAgent.toLowerCase().indexOf('gecko')>0;};scrollVertical.prototype.play=function(o){var s_msg=o.scrollMsg;var c_msg=o.copyMsg;var s_area=o.scrollArea;var msg_h=o.msgHeight;var anim=function(){if(o.scrollTimer)clearTimeout(o.scrollTimer);if(o.isPause){o.scrollTimer=setTimeout(anim,10);return;}
if(msg_h-o.scrollValue<=0){o.scrollValue=0;}else{o.scrollValue+=1;o.scrollHeight+=1;}
if(o.isMoz){s_area.scrollTop=o.scrollValue;}else{s_msg.style.top=-1*o.scrollValue+"px";c_msg.style.top=(msg_h-o.scrollValue)+"px";}
if(o.scrollHeight%s_area.offsetHeight==0){o.scrollTimer=setTimeout(anim,o.speed);}else{o.scrollTimer=setTimeout(anim,10);}};anim();};function scrollVertical(disp,msg,tg){if(typeof(disp)=='string'){this.scrollArea=document.getElementById(disp);}else{this.scrollArea=disp;}
if(typeof(msg)=='string'){this.scrollMsg=document.getElementById(msg);}else{this.scrollMsg=msg;}
var s_msg=this.scrollMsg;var s_area=this.scrollArea;if(!tg)var tg='li';this.unitHeight=s_msg.getElementsByTagName(tg)[0].offsetHeight;this.msgHeight=this.unitHeight*s_msg.getElementsByTagName(tg).length;s_msg.style.position="absolute";s_msg.style.top=0;s_msg.style.left=0;var copydiv=document.createElement('div');copydiv.id=s_area.id+"_copymsgid";copydiv.innerHTML=s_msg.innerHTML;copydiv.style.height=this.msgHeight+"px";s_area.appendChild(copydiv);copydiv.style.position="absolute";copydiv.style.top=this.msgHeight+"px";copydiv.style.left=0;this.copyMsg=copydiv;this.play(this);}// JavaScript Document

movetest.html
< html >
< head >
< title > MoveTest </ TITLE >
< meta  http-equiv =content-type  content ="text/html; charset=gb2312" >
< script  src ="move.js" ></ script >
< script >
window.onload 
=   function (){
 
var  s_m_1  =   new  scrollVertical('castroom','castroom_con','li');
 s_m_1.speed 
=   2000 ;
 s_m_1.isPause 
=   true ;
 
var  timer_start  =  setTimeout( function (){clearTimeout(timer_start);s_m_1.isPause  =   false ;}, 1500 );
 s_m_1.scrollArea.onmouseover 
=   function (){
 s_m_1.isPause 
=   true ;
 };
 s_m_1.scrollArea.onmouseout 
=   function (){
 s_m_1.isPause 
=   false ;
 };
};
</ script >
</ head >

< body >
< div  class ="mpbar" >< strong > test </ strong ></ div >

< div  class ="mprcol_con" >
    
< div  id ="castroom"  style ="position:relative;height:120px;width:138px;overflow:hidden;" >
        
< div  id ="castroom_con" >
            
< ul  class ="wdlst" >
            
< li > a </ li >< li > b </ li >< li > c </ li >< li > d </ li >             
            
< li > e </ li >< li > f </ li >< li > g </ li >< li > h </ li >
            
< li > i </ li >< li > j </ li >< li > k </ li >< li > h </ li >
            
< li > 1 </ li >< li > 2 </ li >< li > 3 </ li >< li > 4 </ li >
            
< li > 5 </ li >< li > 6 </ li >< li > 7 </ li >< li > 8 </ li >
            
</ ul >
        
</ div >
    
</ div >
</ div >

</ body >
</ html >
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值