仿豬八戒網(wǎng)左下角的文字滾動(dòng)效果
更新時(shí)間:2011年10月28日 23:56:45 作者:
覺(jué)得豬八戒網(wǎng)左下角的文字滾動(dòng),效果不錯(cuò)!自己摸索了一下,以自己的方法實(shí)現(xiàn)了!沒(méi)有運(yùn)用jQuery,不過(guò)用了自己的編寫的Js庫(kù)!
源碼:
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:
個(gè)人js工具庫(kù),猛點(diǎn)擊!
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:
復(fù)制代碼 代碼如下:
*{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:
個(gè)人js工具庫(kù),猛點(diǎn)擊!
復(fù)制代碼 代碼如下:
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實(shí)現(xiàn)文字滾動(dòng)效果
- js實(shí)現(xiàn)文字滾動(dòng)效果
- js+div實(shí)現(xiàn)文字滾動(dòng)和圖片切換效果代碼
- js焦點(diǎn)文字滾動(dòng)效果代碼分享
- JS實(shí)現(xiàn)倒計(jì)時(shí)和文字滾動(dòng)的效果實(shí)例
- js 動(dòng)態(tài)文字滾動(dòng)的例子
- 基于Jquery的文字滾動(dòng)跑馬燈插件(一個(gè)頁(yè)面多個(gè)滾動(dòng)區(qū))
- js 上下文字滾動(dòng)效果
- 淺析js 文字滾動(dòng)效果
- Marquee配合DIV實(shí)現(xiàn)的文字滾動(dòng)效果代碼
- js文字滾動(dòng)停頓效果代碼
- 如何讓一個(gè)方框欄內(nèi)的文字滾動(dòng)顯示?
- 一個(gè)非常好用的文字滾動(dòng)的案例,鼠標(biāo)懸浮可暫停[兩種方案任選]
相關(guān)文章
論壇轉(zhuǎn)貼工具中用到的正則表達(dá)式學(xué)習(xí)正則的好例子
論壇轉(zhuǎn)貼工具中用到的正則表達(dá)式學(xué)習(xí)正則的好例子...2007-11-11用Div仿showModalDialog模式菜單的效果的代碼
用Div仿showModalDialog模式菜單的效果的代碼...2007-03-03JavaScript常用數(shù)組元素搜索或過(guò)濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過(guò)濾的四種方法,每種方式通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08JavaScript 替換Html標(biāo)簽實(shí)現(xiàn)代碼
這種技術(shù)被廣泛應(yīng)用于表單驗(yàn)證,語(yǔ)法高亮和危險(xiǎn)字符過(guò)濾中。一段話如果很長(zhǎng),如果不想像下面那樣替換,我們得想些辦法了。2009-10-10JS實(shí)現(xiàn)將數(shù)字金額轉(zhuǎn)換為大寫人民幣漢字的方法
這篇文章主要介紹了JS實(shí)現(xiàn)將數(shù)字金額轉(zhuǎn)換為大寫人民幣漢字的方法,涉及javascript字符串與數(shù)組操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08