觉得猪八戒网左下角的文字滚动,效果不错,自己摸索了一下,以自己的方法实现了!

觉得猪八戒网左下角的文字滚动,效果不错!

自己摸索了一下,以自己的方法实现了!

没有运用jQuery,不过用了自己的编写的Js库!

有兴趣的可以看看!

源码:

css:

 1 *{padding:0;margin:0;font-size:12px;}
 2 .do_ta { border: 1px solid #E4E4E4; margin:10px auto; width:170px; }
 3 .do_ta .ta_ta { background: url("http://s.zbjimg.com/p/zbj/css/../img/tafb.gif") no-repeat; height: 52px; width: 168px; }
 4 .do_ta .ta_tc { height: 61px; line-height: 20px; margin: 10px; overflow: hidden; padding: 0;position:relative; }
 5 .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; }
 6 .do_ta .ta_tc li .time { color: #999999; }
 7 .do_ta .ta_tc li u { color: #2B9A00; text-decoration:none;}
 8 .do_ta .ta_tc li s { color: #FF3600; text-decoration:none;}
 9 .do_ta .ta_tc li a { color: #1A69DE;text-decoration:none; }
10 .do_ta .dota_d { padding: 5px 0 15px; text-align: center; }
11 .do_ta .dota_d a{color:#666;}

 javascript:

 个人js工具库,猛点击!

 1 Meng.extend({
 2     zbjScrollText:function(scrollId){
 3         var li = Meng.getTag('li',Meng.getId(scrollId)),
 4           
 5             curActLi = 0,
 6             getActivity = function(){
 7                 return [li[curActLi],li[10+curActLi],li[20+curActLi],li[30+curActLi]];
 8                 },
 9             sliceDown = function(elem,pos){
10                 Meng.setStyle(elem,{top:'-60px',zIndex:1});
11                 Meng.animate(elem,{top:-60},{top:60},800);
12                 },
13             play = function(){
14                 Meng.each(getActivity(),function(i){
15                     var _this = this;
16                     setTimeout(function(){
17                         sliceDown(_this,i);
18                         },i*900);
19                     });    
20                 };
21                 play();
22             setInterval(function(){
23                 if(curActLi == 9){
24                   curActLi = 0;
25                   Meng.each(li,function(){Meng.setStyle(this,{zIndex:0})});
26                 }else curActLi++;
27                 play();
28                 },5000);
29         }
30         });
31 Meng.zbjScrollText('dota1');
posted @ 2011-10-27 13:18  孟回头  阅读(1145)  评论(9编辑  收藏  举报