Study Journals of TYRuan: 5月 2014

2014年5月29日星期四

如何設定MySQL column 的character set and collation

alter table mobile.IMA_FILE modify ima01 varchar(40) character set utf8 collate utf8_unicode_ci;

2014年5月27日星期二

仿 Yahoo 滾動式訊息跑馬燈加強版

http://abgne.tw/jquery/apply-jquery/jquery-yahoo-scroll-message-marquee-plus.html/comment-page-1#comments

有同學問說能否在訊息跑馬燈中加入上下鈕，預設是往下滾動來看訊息，但若使用者點了往上時則再切回上一個訊息。這樣的跑馬燈讓我想到前幾篇的「仿 Yahoo 滾動式訊息跑馬燈」，只是再多加兩個按鈕來控制就可以了。

既然如此，就來動手把「仿 Yahoo 滾動式訊息跑馬燈」做點加強改造囉。首先就是要在 HTML 中多加那兩顆鈕：

檢視原始碼 HTML

<body>
 <div id="abgne_marquee">
  <div class="marquee_btn" id="marquee_next_btn"><img src="marquee_next_btn.jpg" /></div>
  <ul>
   <li><a href="http://www.flycan.com.tw/course/course_javascript.php">【開課快訊】04/11 JavaScript ＆ CSS 互動程式入門班 (週日班)</a></li>
   <li><a href="http://www.flycan.com.tw/course/course_photopro.php">【開課快訊】05/09 Photoshop 影像達人專修班 (週日班)</a></li>
   <li><a href="http://abgne.tw/site-proclamation/questionnaire-1.html">【調查】你的獎品你來決定 - 活動獎品大調查</a></li>
  </ul>
  <div class="marquee_btn" id="marquee_prev_btn"><img src="marquee_prev_btn.jpg" /></div>
 </div>
</body>

因為多了兩個左右護法出來，所以得讓我們的訊息主題往旁邊退一點點；同時也得為這兩個鈕來裝扮一下：

檢視原始碼 CSS

div#abgne_marquee {
 position: relative;
 overflow: hidden; /* 超出範圍的部份要隱藏 */
 width: 415px;
 height: 25px;
 border: 1px solid #ccc;
}
div#abgne_marquee ul, div#abgne_marquee li {
 margin: 0;
 padding: 0;
 list-style: none;
}
div#abgne_marquee ul {
 position: absolute;
 left: 30px;   /* 往後推個 30px */
}
div#abgne_marquee ul li a {
 display: block;
 overflow: hidden; /* 超出範圍的部份要隱藏 */
 font-size:12px;
 height: 25px;
 line-height: 25px;
 text-decoration: none;
}
div#abgne_marquee div.marquee_btn {
 position: absolute;
 cursor: pointer;
}
div#abgne_marquee div#marquee_next_btn {
 left: 5px;
}
div#abgne_marquee div#marquee_prev_btn {
 right: 5px;
}

如果沒什麼差錯的話，當完成到這一步時就能看到基本的畫面了：

jquery_yahoo_scroll_message_marquee_plus_1

再來就是把原本的程式做一點改造：

檢視原始碼 JavaScript

$(function(){
 // 先取得 div#abgne_marquee ul
 // 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
 // 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
 // 設定跑馬燈移動的速度及輪播的速度
 var $marqueeUl = $('div#abgne_marquee ul'),
  $marqueeli = $marqueeUl.append($marqueeUl.html()).children(),
  _height = $('div#abgne_marquee').height() * -1,
  scrollSpeed = 600,
  timer,
  speed = 3000 + scrollSpeed,
  direction = 0, // 0 表示往上, 1 表示往下
  _lock = false;
 
 // 先把 $marqueeli 移動到第二組
 $marqueeUl.css('top', $marqueeli.length / 2 * _height);
 
 // 幫左邊 $marqueeli 加上 hover 事件
 // 當滑鼠移入時停止計時器；反之則啟動
 $marqueeli.hover(function(){
  clearTimeout(timer);
 }, function(){
  timer = setTimeout(showad, speed);
 });
 
 // 判斷要往上還是往下
 $('div#abgne_marquee .marquee_btn').click(function(){
  if(_lock) return;
  clearTimeout(timer);
  direction = $(this).attr('id') == 'marquee_next_btn' ? 0 : 1;
  showad();
 });
 
 // 控制跑馬燈上下移動的處理函式
 function showad(){
  _lock = !_lock;
  var _now = $marqueeUl.position().top / _height;
  _now = (direction ? _now - 1 + $marqueeli.length : _now + 1)  % $marqueeli.length;
 
  // $marqueeUl 移動
  $marqueeUl.animate({
   top: _now * _height
  }, scrollSpeed, function(){
   // 如果已經移動到第二組時...則馬上把 top 設回到第一組的最後一筆
   // 藉此產生不間斷的輪播
   if(_now == $marqueeli.length - 1){
    $marqueeUl.css('top', $marqueeli.length / 2 * _height - _height);
   }else if(_now == 0){
    $marqueeUl.css('top', $marqueeli.length / 2 * _height);
   }
   _lock = !_lock;
  });
 
  // 再啟動計時器
  timer = setTimeout(showad, speed);
 }
 
 // 啟動計時器
 timer = setTimeout(showad, speed);
 
 $('a').focus(function(){
  this.blur();
 });
});

基本的程式架構並沒有什麼改變，只是一開始並不確定使用者會不會往上來看訊息，所以筆者就利用程式先把訊息移動到第二組：

檢視原始碼 JavaScript

1 2	// 先把 $marqueeli 移動到第二組 $marqueeUl.css('top', $marqueeli.length / 2 * _height);

接著再透過變數 direction 來決定是要往上還是往下來滾動訊息跑馬燈。

檢視原始碼 JavaScript

1 2	var _now = $marqueeUl.position().top / _height; _now = (direction ? _now - 1 + $marqueeli.length : _now + 1) % $marqueeli.length;

如果沒問題的話，現在的訊息跑馬燈預設就會往上跑，同時也能透過按鈕來決定跑馬燈的方向囉。

範例 1 範例 2 範例 3

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

Ext JS 版：

範例 1 範例 2

仿 Twitter 的附加式訊息跑馬燈

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

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

jquery_twitter_like_append_message_marquee_0

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

筆者這邊就用固定幾則訊息的方式來實做，首先準備好 HTML 內容：

檢視原始碼 HTML

<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

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 則了。

jquery_twitter_like_append_message_marquee_1

其它看不到的訊息就是要利用程式來把它們一一附加到第一筆來顯示：

檢視原始碼 JavaScript

$(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);
});

完成後就能看到會自動不斷的把最後一筆附加到第一筆的跑馬燈效果了：

jquery_twitter_like_append_message_marquee_2

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

所以筆者再稍微修改一下 CSS：

檢視原始碼 CSS

.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

$(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% 的效果囉。

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

jquery_twitter_like_append_message_marquee_3

範例 1 範例 2 範例 3

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

2014年5月25日星期日

讓linux不給ping的方法

http://uiloon.wordpress.com/2008/05/23/%E8%AE%93linux%E4%B8%8D%E7%B5%A6ping%E7%9A%84%E6%96%B9%E6%B3%95/

讓linux不給ping的方法

23 05 2008 超簡單的拉~!!只要在/etc/sysctl.conf 裡面加上這一行
net.ipv4.icmp_echo_ignore_all = 1
記住等號"="的兩邊都要空格，
搞定了~!連你自己都不能ping…..
如果你只是現在不想給別人ping，
那麼建議你這樣子做echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all
這個是系統的虛擬檔案，當這個檔案裡面為0時，表示不擋ping，
現在我們把它設為1表示，擋掉所有的ping，
而一開始的設定是直接把他寫入檔案，這樣開機後就不會變動，
也就是說在/proc裡面的修改下次開機之後就會不見嚕~!
所以如果你一直都要修改某個設定，請你修改設定檔喔~!

About these ads

2014年5月20日星期二

隱藏工作表中的格線

1. Method 1

2. Method 2

訂閱：文章 (Atom)

Study Journals of TYRuan

標籤

2014年5月29日星期四

如何設定MySQL column 的character set and collation

2014年5月27日星期二

仿 Yahoo 滾動式訊息跑馬燈加強版

仿 Twitter 的附加式訊息跑馬燈

2014年5月25日星期日

讓linux不給ping的方法

讓linux不給ping的方法

2014年5月20日星期二

隱藏工作表中的格線

網誌存檔

標籤

2014年5月29日 星期四

如何設定MySQL column 的character set and collation

2014年5月27日 星期二

仿 Yahoo 滾動式訊息跑馬燈加強版

仿 Twitter 的附加式訊息跑馬燈

2014年5月25日 星期日

讓linux不給ping的方法

讓linux不給ping的方法

2014年5月20日 星期二

隱藏工作表中的格線

網誌存檔

2014年5月29日星期四

2014年5月27日星期二

2014年5月25日星期日

2014年5月20日星期二