要實(shí)現(xiàn)簡(jiǎn)單的跑馬燈效果其實(shí)運(yùn)用html中<marquee></marquee>標(biāo)簽就可以達(dá)到了
基本屬性如下:
1.滾動(dòng)方向direction(包括4個(gè)值:up澳泵、 down翁脆、 left和 right)
2.滾動(dòng)方式behavior(scroll:循環(huán)滾動(dòng)谁鳍,默認(rèn)效果; slide:只滾動(dòng)一次就停止挠他; alternate:來回交替進(jìn)行滾動(dòng))
3.滾動(dòng)速度scrollamount(滾動(dòng)速度是設(shè)置每次滾動(dòng)時(shí)移動(dòng)的長(zhǎng)度蔬墩,以像素為單位)
4.滾動(dòng)延遲scrolldelay(設(shè)置滾動(dòng)的時(shí)間間隔,單位是毫秒)
5.滾動(dòng)循環(huán)loop(默認(rèn)值是-1佑淀,滾動(dòng)會(huì)不斷的循環(huán)下去)
6.滾動(dòng)范圍width留美、height
7.滾動(dòng)背景顏色bgcolor
8.空白空間hspace、vspace
如果想要更多的動(dòng)畫效果,更多選擇jquery.marquee.js這款插件——ul里的啥都能滾并自帶懸停效果
1.html 中寫入<ul id="marquee"><li></li></ul>
2.js中調(diào)入$("#marquee").marquee();即可
3.css比較簡(jiǎn)單谎砾,一般自己寫逢倍,大致如下:
ul.marquee{display:block;line-height:1;position:relative;overflow:hidden;width:400px;height:22px;}
ul.marquee?li{position:absolute;top:-999em;left:0;display:block;white-space:nowrap;padding:3px5px;text-indent:0.8em;}
4.相關(guān)參數(shù)如下:
{
yScroll:"top"; ?//?初始滾動(dòng)方向?(還可以是"top"?或?"bottom")
showSpeed:850; ?//?初始下拉速度
scrollSpeed:12; ?//?滾動(dòng)速度
pauseSpeed:5000; ?//?滾動(dòng)完到下一條的間隔時(shí)間
pauseOnHover:true; ?//?鼠標(biāo)滑向文字時(shí)是否停止?jié)L動(dòng)
loop:-1; ?//?設(shè)置循環(huán)滾動(dòng)次數(shù)?(-1為無限循環(huán))
fxEasingShow:"swing"; ?//?緩沖效果
fxEasingScroll:"linear"; ?//?緩沖效果
cssShowing:"marquee-showing"; ?//定義class event handlers
init:null; ?//?初始調(diào)用函數(shù)
beforeshow:null; ?//?滾動(dòng)前回調(diào)函數(shù)
show:null; ?//?當(dāng)新的滾動(dòng)內(nèi)容顯示時(shí)回調(diào)函數(shù)
aftershow:null; ?//?滾動(dòng)完了回調(diào)函數(shù)
}