微博首页上留言滚动那效果是怎么做的
http://t.sina.com.cn新浪微博首页，，
大家在说什么那块。。上下滚动那效果是怎么做的。。用js如果做。。
大家帮忙解决一下。。
还有这些内容是不是他们一次性读出最近的留言。。然后用js实现上下滚动的效果。。 --------------------编程问答-------------------- marquee用这个做过滚动 --------------------编程问答--------------------
<script type="text/javascript">--------------------编程问答-------------------- 顶楼上，是用自定义函数写的哦！ --------------------编程问答-------------------- <MARQUEE ALIGN="…"
function $i(id){return document.getElementById(id);}
// 横着滚动
function 易做图SideScroll(c,ul,config,direction){
this.config = config ? config : {start_delay:3000, speed: 23, delay:4000, scrollItemCount:1};
this.c = $i(c);
this.ul = $i(ul);
this.direction = direction ? direction : "left";
this.pause = false;
this.buttonlist= new Object();
this.delayTimeId=null;
var _this = this;
this.c.onmouseover=function(){_this.pause = true;}
this.c.onmouseout=function(){_this.pause = false;}
this.init = function() {
_this.scrollTimeId = null;
setTimeout(_this.start,_this.config.start_delay);
}
this.start = function() {
var d = _this.c;
var width = d.getElementsByTagName('li')[0].offsetWidth;
if(d.scrollWidth-d.offsetLeft>=width) _this.scrollTimeId = setInterval(_this.scroll,_this.config.speed)
};
this.scroll = function() {
if(_this.pause)return;
var ul= _this.ul;
var d = _this.c;
var width = d.getElementsByTagName('li')[0].offsetWidth;
if(_this.direction == 'left'){
d.scrollLeft += 2;
if(d.scrollLeft%(width*_this.config.scrollItemCount)<=1){
if(_this.config.movecount != undefined)
for(var i=0;i<_this.config.movecount;i++){ul.appendChild(ul.getElementsByTagName('li')[0]);}
else for(var i=0;i<_this.config.scrollItemCount;i++){ul.appendChild(ul.getElementsByTagName('li')[0]);}
d.scrollLeft=0;
clearInterval(_this.scrollTimeId);
_this.delayTimeId=setTimeout(_this.start,_this.config.delay);
}
}
else {
if(d.scrollLeft==0)
{
var lis=ul.getElementsByTagName('li');
for(var i=0;i<_this.config.scrollItemCount;i++){
ul.insertBefore(lis[lis.length-1],lis[0]);
}
d.scrollLeft = width;
}
d.scrollLeft -= 2;
if(d.scrollLeft%(width*_this.config.scrollItemCount)<=1){
d.scrollLeft=0;
clearInterval(_this.scrollTimeId);
_this.delayTimeId=setTimeout(_this.start,_this.config.delay);
}
}
}
this.setButton=function(id,direction){
if($i(id)){
var c=$i(id);
var buttonlist =_this.buttonlist;
if(buttonlist[id] == undefined){
buttonlist[id] =new Object();
_this.buttonlist[id][0]=c;
_this.buttonlist[id][1]=direction;
c.onclick=function(){
clearInterval(_this.scrollTimeId);
var dir=_this.buttonlist[this.id][1];
var d = _this.c;
var ul= _this.ul;
d.scrollLeft=0;
if(dir =="left")
{
for(var i=0;i<_this.config.scrollItemCount;i++){ul.appendChild(ul.getElementsByTagName('li')[0]);}
}
else{
var lis=ul.getElementsByTagName('li');
for(var i=0;i<_this.config.scrollItemCount;i++){
ul.insertBefore(lis[lis.length-1],lis[0]);
}
}
_this.direction= dir;
clearTimeout(_this.delayTimeId);
_this.delayTimeId=setTimeout(_this.start,_this.config.delay);
return false;
}
}
}
}
}
var cooperater_run;
function init_load(){
var ul=$i('scroll_div_img_ul');
var lis=window.document.getElementsByTagName("li");
if(lis.length >9)
{
if($i('scroll_div_img')){
cooperater_run=new 易做图SideScroll('scroll_div_img','scroll_div_img_ul',{start_delay:0, speed:30, delay:0, scrollItemCount:1},'left')
cooperater_run.init();
}
}
}
function ScrollDivLeft()
{
if(cooperater_run !=null )
{
cooperater_run.direction="left";
}
}
function ScrollDivRight()
{ if(cooperater_run !=null )
{
cooperater_run.direction="right";
}
}
if(window.attachEvent){
window.attachEvent("onload",init_load);
var obj=$i('left');
obj.attachEvent("onclick",ScrollDivLeft);
obj=$i('right');
obj.attachEvent("onclick",ScrollDivRight);
}else if(window.addEventListener){
window.addEventListener("load",init_load,false);
var obj=$i('left');
obj.addEventListener("click",ScrollDivLeft,false);
obj=$i('right');
obj.addEventListener("click",ScrollDivRight,false);
}
</script>
behavior="…"
BGCOLOR="…"
DIRECTION="…"
HEIGHT="…"
WIDTH="…"
HSPACE="…"
VSPACE="…"
LOOP="…"
SCROLLAMOUNT="…"
SCROLLDELAY="…"
>…</MARQUEE>
align: 对齐方式 LEFT，CENTER，RIGHT，TOP，BOTTOM (不用多说了)
behavior: 用于设定滚动的方式，主要由三种方式：
behavior="scroll": 表示由一端滚动到另一端；
behavior="slide": 表示由一端快速滑动到另一端，且不再重复；
behavior="alternate" : 默认值——表示在两端之间来回滚动。
direction: left(默认值) 左; right 右;up 上;down 下;
bgcolor: 背景颜色
height: 高度
weight: 宽度
Hspace/vspace: 分别用于设定滚动字幕的左右边框和上下边框的宽度。作用大概和css中的margin差不多
scrollamount: 用于设定每个连续滚动文本后面的间隔，该间隔用像素表示，以上是官方说法,其实就是滚动的速度，值不能太大,要不从视觉角度来说,是没反应的.值越大速度越快，反之越慢。
scrolldelay: 延迟时间
loop: 这个属性大家也很熟悉，循环次数；loop=-1的时候一直重复循环（默认值）
onmouseover: 鼠标触发事件---当用户将鼠标指针移动到对象内时触发
onmouseout: 鼠标滑出事件---当用户将鼠标指针移出对象边界时触发
这里要用到的是 this.start() 与this.stop()
innercode: 设置或获取位于对象起始和结束标签内的 code
innerText: 设置或获取位于对象起始和结束标签内的文本
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。PS:大家不要想当然的以为有scrollRigh和scrollDown ：）
scrollDelay: 设置或获取字幕滚动的速度，要创建垂直滚动的字幕，请将其 scrollLeft 属性设定为0，要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置
scrollHeight: 获取对象的滚动高度
scrollAmount: 设置或获取介于每个字幕绘制序列之间的文本滚动像素数
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
setInterval: 交互时间。它从载入后,每隔指定的时间就执行一次表达式
clearInterval: 使用 setInterval 方法取消先前开始的间隔事件。
怎么让marquee当鼠标移上去后停止滚动！
<marquee direction="up" width="146" height="113" scrolldelay="80" scrollamount="2" border="0" onmouseover="this.stop()" onMouseOut="this.start()">
你要滚动的内容
</marquee> --------------------编程问答--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#demo{background: #FFF;overflow:hidden;width: 450px;height:22px;}
#indemo{float: left;width: 200%;}
#demo1{float: left;text-align:center;}
#demo2{float: left;text-align:center;}
</style>
</head>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#">微博快跑深圳</a>
<a href="#">美好畅想</a>
<a href="#">腾讯360弹窗大战</a>
<a href="#">微小说</a>
<a href="#">NBA</a>
<a href="#">降温</a>
</div>
<div id="demo2">
</div>
</div>
</div>
<script type="text/javascript">
var speed=10;
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
function Marquee()
{
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab2.offsetWidth;
else
tab.scrollLeft++;
}
var Mar = setInterval(Marquee,speed);
tab.onmouseover=function(){clearInterval(Mar);}
tab.onmouseout = function(){Mar = setInterval(Marquee,speed);}
</script>
</body>
</html>
补充：.NET技术 , ASP.NET
