仿猪八戒网左下角的文字滚动效果

源码：

css:
复制代码 代码如下:
*{padding:0;margin:0;font-size:12px;}
.do_ta { border: 1px solid #E4E4E4; margin:10px auto; width:170px; }
.do_ta .ta_ta { background: url("http://s.zbjimg.com/p/zbj/css/../img/tafb.gif") no-repeat; height: 52px; width: 168px; }
.do_ta .ta_tc { height: 61px; line-height: 20px; margin: 10px; overflow: hidden; padding: 0;position:relative; }
.do_ta .ta_tc li { border-bottom: 1px dashed #E4E4E4; color: #666666; height: 60px; margin: 0; overflow: hidden; padding: 0;position:absolute;top:0;left:0;background:#fff;z-index:0;width:155px; }
.do_ta .ta_tc li .time { color: #999999; }
.do_ta .ta_tc li u { color: #2B9A00; text-decoration:none;}
.do_ta .ta_tc li s { color: #FF3600; text-decoration:none;}
.do_ta .ta_tc li a { color: #1A69DE;text-decoration:none; }
.do_ta .dota_d { padding: 5px 0 15px; text-align: center; }
.do_ta .dota_d a{color:#666;}

javascript:

个人js工具库，猛点击！
复制代码 代码如下:
Meng.extend({
zbjScrollText:function(scrollId){
var li = Meng.getTag('li',Meng.getId(scrollId)),

curActLi = 0,
getActivity = function(){
return [li[curActLi],li[10+curActLi],li[20+curActLi],li[30+curActLi]];
},
sliceDown = function(elem,pos){
Meng.setStyle(elem,{top:'-60px',zIndex:1});
Meng.animate(elem,{top:-60},{top:60},800);
},
play = function(){
Meng.each(getActivity(),function(i){
var _this = this;
setTimeout(function(){
sliceDown(_this,i);
},i*900);
});
};
play();
setInterval(function(){
if(curActLi == 9){
curActLi = 0;
Meng.each(li,function(){Meng.setStyle(this,{zIndex:0})});
}else curActLi++;
play();
},5000);
}
});
Meng.zbjScrollText('dota1');

您可能感兴趣的文章:

• Android实现文字滚动效果
• js实现文字滚动效果
• js+div实现文字滚动和图片切换效果代码
• js焦点文字滚动效果代码分享
• JS实现倒计时和文字滚动的效果实例
• js 动态文字滚动的例子
• 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
• js 上下文字滚动效果
• 浅析js 文字滚动效果
• Marquee配合DIV实现的文字滚动效果代码
• js文字滚动停顿效果代码
• 如何让一个方框栏内的文字滚动显示？
• 一个非常好用的文字滚动的案例，鼠标悬浮可暂停[两种方案任选]