2014年5月27日 星期二

仿 Twitter 的附加式訊息跑馬燈

http://abgne.tw/jquery/apply-jquery/jquery-twitter-like-append-message-marquee.html

如果有在使用 Twitter 的網友應該會看到它們官網上的 Top Tweets 是會一直有新的訊息加到第一筆。



當然它能是利用 Ajax 的方式來取得最新的訊息並加到第一筆，不過也有可能是固定的幾則訊息在那邊像摩天輪一樣的轉啊轉的。但這並不是此次筆者要跟各位討論的話題，最重要的是如何實現像 Twitter 一樣的訊息附加的跑馬燈效果。

筆者這邊就用固定幾則訊息的方式來實做，首先準備好 HTML 內容：
檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<body>
 <div class="abgne-news-scroll">
  <ul>
   <li>圖書管理系統 - 預算約 20 萬元</li>
   <li>WordPress 投票系統 - 預算 3 萬元</li>
   <li>Joomla 網站設計整合 - 預算 4 萬元</li>
   <li>網頁文案 - 請報價</li>
   <li>Flash 按鈕 - 預算 2 千元</li>
   <li>Facebook 程式設計開發專案 - 預算 8 萬元</li>
   <li>WordPress 佈景外包 - 請報價</li>
   <li>部落格模板風格設計專案 - 請報價</li>
   <li>網站前後端程式設計專案 - 請報價</li>
   <li>學生專題-資料庫整合外包 - 預算 5 千以內</li>
  </ul>
 </div>
</body>
接著稍微排一下版面：
檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ul, li {
 margin: 0;
 padding: 0;
 list-style: none;
}
.abgne-news-scroll {
 border: 1px solid #f39;
 width: 320px;
 height: 120px;
 overflow: hidden;
 position: relative;
}
.abgne-news-scroll li {
 background: url(arr.jpg) no-repeat 5px 10px;
 padding: 5px 0 5px 19px;
}
本來有 10 則訊息，但透過 CSS 來排版後就只能看到 4 則了。



其它看不到的訊息就是要利用程式來把它們一一附加到第一筆來顯示：
檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(function(){
 // 先取得 .abgne-news-scroll ul, 並設定淡入及輪播時間
 var $news = $('.abgne-news-scroll ul'), 
  fadeInSpeed = 1000, 
  timer, speed = 3000;
 
 // 用來控制輪播用
 function newsScroll(){
  // 先找出最後一個 li
  var $last = $news.find('li:last');
  // 複製一份並先隱藏起來
  // 接著把它加到 .abgne-news-scroll ul 中的第一個項目
  // 最後用淡入的方式顯示, 當顯示完後繼續輪播
  $last.clone().hide().prependTo($news).fadeIn(fadeInSpeed, function(){
   timer = setTimeout(newsScroll, speed);
  });
  // 把 $last 移除掉
  $last.remove();
 }
 
 // 啟動輪播計時器
 timer = setTimeout(newsScroll, speed);
});
完成後就能看到會自動不斷的把最後一筆附加到第一筆的跑馬燈效果了：



不知道有沒有人注意到訊息是突然就跳插進去的，感覺有點不是那麼滑順。這是因為新的訊息項目會把整個 ul 往下擠，且被附加的項目一開始又是隱藏的，所以才會看到突然跳插的畫面。

所以筆者再稍微修改一下 CSS：
檢視原始碼 CSS
1
2
3
4
5
6
7
8

.abgne-news-scroll ul {
 position: absolute;
}
.abgne-news-scroll li {
 background: url(arr.jpg) no-repeat 5px 10px;
 height: 20px;
 padding: 5px 0 5px 19px;
}
接著針對 .abgne-news-scroll ul 的移動做點手腳：
檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

$(function(){
 // 先取得 .abgne-news-scroll ul 及 li 的高度
 // 並設定訊息移動, 淡入及輪播時間
 var $news = $('.abgne-news-scroll ul'), 
  scrollHeight = $news.find('li').outerHeight(true), 
  scrollSpeed = 600, fadeInSpeed = 600, 
  timer, speed = 3000;
 
 // 用來控制輪播用
 function newsScroll(){
  // 先把 .abgne-news-scroll ul 往下移
  $news.animate({
   top: scrollHeight + 'px'
  }, scrollSpeed, function(){
   // 當 .abgne-news-scroll ul 移動到定點後
   // 先找出最後一個 li
   var $last = $news.find('li:last');
   // 複製一份並先隱藏起來
   // 接著把它加到 .abgne-news-scroll ul 中的第一個項目
   // 最後用淡入的方式顯示, 當顯示完後繼續輪播
   $last.clone().hide().prependTo($news).fadeIn(fadeInSpeed, function(){
    timer = setTimeout(newsScroll, speed);
   });
   // 馬上把 .abgne-news-scroll ul 移到 top 等於 0 的位置
   $news.css('top', 0);
   // 把 $last 移除掉
   $last.remove();
  });
 }
 
 // 啟動輪播計時器
 timer = setTimeout(newsScroll, speed);
});
這邊最重要的步驟是再附加新的項目前，先透過動畫的方式來把 .abgne-news-scroll ul 往下移動，並在附加新的項目後快速的把它在移回 top 等於 0 的位置。整個動作串起來就能做出仿真度達 99% 的效果囉。

這是筆者把整個訊息區塊改變後的效果：


範例 1 範例 2 範例 3
檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
於

沒有留言:

張貼留言