js实现间歇滚动内容

    技术2022-05-11  85

    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)