仿豬八戒網(wǎng)左下角的文字滾動效果

更新時間：2011年10月28日 23:56:45 作者：

覺得豬八戒網(wǎng)左下角的文字滾動，效果不錯！自己摸索了一下，以自己的方法實(shí)現(xiàn)了！沒有運(yù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工具庫，猛點(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'); 

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)照片裁剪
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)照片裁剪，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
RequireJS使用注意細(xì)節(jié)
RequireJS是一個非常小巧的JavaScript模塊載入框架，是AMD規(guī)范最好的實(shí)現(xiàn)者之一。這篇文章主要介紹了RequireJS使用注意細(xì)節(jié)的相關(guān)資料,需要的朋友可以參考下
2016-05-05
JavaScript省市聯(lián)動實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript省市聯(lián)動實(shí)現(xiàn)代碼,需要的朋友可以參考下
2014-02-02
js實(shí)現(xiàn)鼠標(biāo)滑動到某個div禁止?jié)L動
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)滑動到某個div禁止?jié)L動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
基于rollup的組件庫打包體積優(yōu)化小結(jié)
這篇文章主要介紹了基于rollup的組件庫打包體積優(yōu)化小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
es6的數(shù)字處理的方法（5個）
本文主要介紹了es6的數(shù)字處理的方法。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
輕松實(shí)現(xiàn)jquery手風(fēng)琴效果
這篇文章主要為大家介紹了實(shí)現(xiàn)jquery手風(fēng)琴效果的詳細(xì)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-01-01
window.open打開窗口被攔截的快速解決方法
下面小編就為大家?guī)硪黄獁indow.open打開窗口被攔截的快速解決方法。覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
關(guān)于layui的按鈕禁用與恢復(fù)方式
這篇文章主要介紹了關(guān)于layui的按鈕禁用與恢復(fù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
淺談Javascript中substr和substring的區(qū)別
這篇文章主要介紹了Javascript中substr和substring的區(qū)別，非常的簡單明了，有需要的小伙伴可以來仔細(xì)看看。
2015-09-09