【Jquery】超级Marquee

今天介紹一套Jquery套件，是對岸的高手寫的。

因為有案子要求說跑馬燈要由下往上移動，可是，原生的Marquee並不會在每一則之間做停留。

某天下班主管正在做這件事情，好像在做的過程用某一套件遇到Css怎麼調都不對。

我回家，坐下來就把哥哥(Google)打開啦！想說神物級的Jquery怎麼可能沒有類似套件。

就找到了這一套：http://www.kxbd.com/article.asp?id=280

範例頁面：http://www.kxbd.com/mylab/090720marquee/

左下角正是我所需要的效果。

當然，就把範例程式下載回來仔細的看了一看。

對岸的高手寫的套件優點之一，雖然是簡中，但他還是中文啊！而且說明的很充足。

首先把Css和JavsScript引用進來。
<script src="/JS/kxbdSuperMarquee.js" type="text/javascript"></script><style type="text/css"><![CDATA[jmarquee {float:left;width:400px;height:20px;overflow:hidden;}
        #jmarquee ul {float:left; width:380px;margin-left:0;padding-left:0;list-style:none;}
        #jmarquee ul li {float:left; width:380px;margin-left:0;padding-left:0}]]></style>


$(document).ready(function(){
  $(function () {
            $('#jmarquee').kxbdSuperMarquee({
                isEqual: false,
                distance: 24,
                time: 4,
                direction: 'up'
            });
        });
 

之後格式為：

*      <div id="marquee">
*          <ul>
*               <li>
*               </li><li>
*          </li></ul>
*      </div>

      另外，也推薦In 91大的寫的：http://www.dotblogs.com.tw/hatelove/archive/2011/09/20/jquery-marquee-ajax-user-control.aspx

原始文章請參考此