分享一個好用的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

留言

這個網誌中的熱門文章

Xoops免費佈景:neilambilight2.5正式版釋出-佈景設計開發:徐嘉裕Neil hsu

Xoops免費佈景:neilambilight2.4正式版釋出-佈景設計開發:徐嘉裕 Neil hsu

在CentOS7上安裝XAMPP並設定允許外部連線phpmyadmin的方法-教學撰寫:徐嘉裕Neil hsu