標題：一行內顯示的電子看版「jQuery WebTicker」
出處：A.PAO designSTUDIO BLOG
時間：Mon, 02 Jan 2012 14:22:54 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/856/

內容：

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=1341


從jQuery WebTicker 下載 jquery.webticker.js
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.webticker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#id名").webTicker({
      travelocity: 0.1, //速度
      direction: 1, //-1で逆向
  })
});
</script>

また、CSS內容記載如下
<style>
.tickercontainer {  //電子看板的大小設定
width: 500px;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
}

.tickercontainer .mask {
position: relative;
top: 8px;
height: 18px;
overflow: hidden;
}

ul.newsticker {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;}

ul.newsticker li { 
float: left;
margin: 0;
padding-right: 15px; //要素間的余白
}
</style>

剩下紀錄於HTML中
<ul id="id名">
  <li>1</li>
  <li>2</li>
  <!-- 以下個数分 -->
</ul>



下載：
點擊這裡下載檔案
點擊這裡下載檔案


Generated by Bo-blog 2.1.1 Release