分享一個好用的jQuery跑馬燈套件als

最近在更新佈景程式要吧原本用很久的javaScript寫的跑馬燈換掉，改用HTML5+jQuery的跑馬燈，剛好找到這個http://als.musings.it/網站有很多最新的JS移動套件可以使用，且維護容易，不過參數及CSS需要修改一下才能使用，以下為修改過後跑馬燈CODE直接套用就可以使用了。

1、先去http://als.musings.it/網站下載jquery.als-1.7.js

2、然後引入jquery.als-1.7.js與加上設定參數(效果是文字由下往上滑動，更多滑動方式可以參考als網站的說明)
<script type="text/javascript" src="js/jquery.als-1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#lista1").als({
visible_items: 1,
scrolling_items: 1,
orientation: "vertical",
circular: "yes",
autoscroll: "yes",
interval: 4000, //跑馬燈速度毫秒
speed: 50,
easing: "linear",
start_from: 0
});
});
</script>
3、於CSS檔案中加上以下的設定，高度寬度及樣式可自行調整增加



#als-div {

position: relative;

width: inherit;

height: 43px;

bottom: 37px;

opacity: 0.9;

z-index: 50;

}

.als-container {

position: relative;

width: 100%;

z-index: 0;

}

.als-viewport {

position: relative;

overflow: hidden;

text-align: left;

}

.als-wrapper {

position: relative;

list-style: none;

}

.als-item {

position: relative;

display: block;

text-align: left;

cursor: pointer;

font-size: 100%;

height: 29px;

overflow: hidden;

}

.als-item a {

color: #FFFFFF;

}

.als-item a:hover {

color: #C4C4C4;

}
4、在HTML檔案中加上要放置跑馬燈的結構語法(可以改成php迴圈傳值smarty方式)


<section id="als-div">

<div id="lista1" class="als-container">

<div class="als-viewport">

<div class="als-wrapper">

<div class="als-item">跑馬燈文字跑馬燈文字跑馬燈文字跑馬燈文字</div>

<div class="als-item">跑馬燈文字跑馬燈文字跑馬燈文字跑馬燈文字</div>

<div class="als-item">跑馬燈文字跑馬燈文字跑馬燈文字跑馬燈文字</div>

<div class="als-item">跑馬燈文字跑馬燈文字跑馬燈文字跑馬燈文字</div>

<div class="als-item">跑馬燈文字跑馬燈文字跑馬燈文字跑馬燈文字</div>

</div>

</div>

</div>

</section>
這樣就能使用als跑馬燈，好處是跟bootstrap.js沒有衝突的問題，推薦給大家!!

教學撰寫：徐嘉裕 Neil hsu