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
>