一、前言
很久以前就想做這種上移的跑馬燈了。剛好這兩天網路上有看到,就參考並做了自己的版本。
網址:
https://docs.google.com/document/d/1_LSkCPGRlHqTQCZM5d5k5gWS4mZyLg73O4KlOLjRF-Y/pub
仿Yahoo跑馬燈
一、前言
很久以前就想做這種上移的跑馬燈了。剛好這兩天網路上有看到,就參考並做了自己的版本。
二、使用方式
$(function()
{
$('#demoDiv').r_marquee() ;
}) ;
三、我版本的優點
是用jQuery套件的方式來寫成,使用上更方便了。也沒有CSS要複製,避免了ID、CLASS重複的問題。也沒有字串太長會跑版的問題,這一點是靠CSS的設定
whiteSpace: 'nowrap'
如果想要跑馬燈換頁的速度更加快,可以修改speed參數
defaults.speed = 2000 ;
如果想要控制跑馬燈的高度,可以修改li_Height參數
defaults.li_Height = 25 ;
至於整個跑馬燈的寬度,使用者也可以自行控制CSS去調整。
#demoDiv{width: 550px;}
四、demo & 原始碼
jsfiddle demo
http://jsfiddle.net/sheephead0818/nt0m7eh4/
github backup
http://ryanyang0818.github.io/%E4%BB%BFYahoo%E5%BC%8F%E8%B7%91%E9%A6%AC%E7%87%88/demo1.html