从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
觉得这个比较适合手头正在做的新闻系统,所以借用代码了。
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 >
< 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 >