仿豬八戒網(wǎng)左下角的文字滾動效果
更新時間:2011年10月28日 23:56:45 作者:
覺得豬八戒網(wǎng)左下角的文字滾動,效果不錯!自己摸索了一下,以自己的方法實現(xiàn)了!沒有運用jQuery,不過用了自己的編寫的Js庫!
源碼:
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');
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');
相關(guān)文章
論壇轉(zhuǎn)貼工具中用到的正則表達式學習正則的好例子
論壇轉(zhuǎn)貼工具中用到的正則表達式學習正則的好例子...2007-11-11用Div仿showModalDialog模式菜單的效果的代碼
用Div仿showModalDialog模式菜單的效果的代碼...2007-03-03JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過濾的四種方法,每種方式通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08JS實現(xiàn)將數(shù)字金額轉(zhuǎn)換為大寫人民幣漢字的方法
這篇文章主要介紹了JS實現(xiàn)將數(shù)字金額轉(zhuǎn)換為大寫人民幣漢字的方法,涉及javascript字符串與數(shù)組操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08