Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Site updated at 2013-02-28 13:02:43 UTC

  • Loading branch information...
commit 3a41f1cdf1f782a011ec1c604d7979e40f6eb772 1 parent 997a422
unknown authored
Showing with 1,393 additions and 1,054 deletions.
  1. +5 −5 about/index.html
  2. +68 −43 atom.xml
  3. +5 −5 blog/2-vmware-windows-8/index.html
  4. +5 −5 blog/5-css-properties/index.html
  5. +5 −5 blog/5-html5-api-you-did-not-know/index.html
  6. +5 −5 blog/alert-confirm-prompt/index.html
  7. +5 −5 blog/android-facebook-key-hashes/index.html
  8. +5 −5 blog/android-phonegap-usb-develop/index.html
  9. +25 −11 blog/archives/index.html
  10. +5 −5 blog/book-review-1/index.html
  11. +5 −5 blog/book-review-2/index.html
  12. +5 −5 blog/book-review-3/index.html
  13. +5 −5 blog/book-review-4/index.html
  14. +5 −5 blog/book-review-5/index.html
  15. +5 −5 blog/book-review-6/index.html
  16. +1 −1  blog/categories/css/atom.xml
  17. +5 −5 blog/categories/css/index.html
  18. +1 −1  blog/categories/facebook/atom.xml
  19. +5 −5 blog/categories/facebook/index.html
  20. +1 −1  blog/categories/html5/atom.xml
  21. +5 −5 blog/categories/html5/index.html
  22. +1 −1  blog/categories/javascript/atom.xml
  23. +5 −5 blog/categories/javascript/index.html
  24. +68 −182 blog/categories/jq-plugin/atom.xml
  25. +19 −5 blog/categories/jq-plugin/index.html
  26. +1 −1  blog/categories/jquery/atom.xml
  27. +5 −5 blog/categories/jquery/index.html
  28. +1 −1  blog/categories/octopress/atom.xml
  29. +5 −5 blog/categories/octopress/index.html
  30. +1 −1  blog/categories/phonegap/atom.xml
  31. +5 −5 blog/categories/phonegap/index.html
  32. +1 −1  blog/categories/win8/atom.xml
  33. +5 −5 blog/categories/win8/index.html
  34. +1 −1  blog/categories/好書分享/atom.xml
  35. +5 −5 blog/categories/好書分享/index.html
  36. +1 −1  blog/categories/學習筆記/atom.xml
  37. +5 −5 blog/categories/學習筆記/index.html
  38. +5 −5 blog/create-lazy-loading/index.html
  39. +5 −5 blog/css-cursor-rule/index.html
  40. +5 −5 blog/css-oocss/index.html
  41. +5 −5 blog/css-positioning/index.html
  42. +5 −5 blog/css-styling-scrollbars/index.html
  43. +5 −5 blog/css3-checkboxes-radiobuttons/index.html
  44. +5 −5 blog/css3-real-beauty-box-shadows/index.html
  45. +5 −5 blog/css3-scrolling-effect/index.html
  46. +5 −5 blog/css3-transitions-guide/index.html
  47. +5 −5 blog/data-uri-web-desing/index.html
  48. +5 −5 blog/design-thinking/index.html
  49. +5 −5 blog/facebook-app-create-getfbid/index.html
  50. +5 −5 blog/facebook-expired-access-tokens/index.html
  51. +5 −5 blog/facebook-page-tab-scroll/index.html
  52. +5 −5 blog/facebook-world-hack/index.html
  53. +5 −5 blog/first-amazon-web-services/index.html
  54. +5 −5 blog/first-octopress/index.html
  55. +5 −5 blog/first-win8-app/index.html
  56. +5 −5 blog/friendly-tooltip-responsive/index.html
  57. +5 −5 blog/hpx-life-23/index.html
  58. +5 −5 blog/inline-block-display-product-grid-view/index.html
  59. +5 −5 blog/introduce-compass/index.html
  60. +5 −5 blog/introduce-ted/index.html
  61. +5 −5 blog/javascript-currying/index.html
  62. +5 −5 blog/javascript-custom-function/index.html
  63. +5 −5 blog/javascript-documentframent/index.html
  64. +5 −5 blog/javascript-namespace/index.html
  65. +5 −5 blog/javascript-patterns-1/index.html
  66. +5 −5 blog/javascript-prototype/index.html
  67. +5 −5 blog/javascript-simple-object/index.html
  68. +5 −5 blog/javascript-xmlhttprequest-level-2/index.html
  69. +5 −5 blog/jquery-8-skill/index.html
  70. +5 −5 blog/jquery-accordion-plugin-kwicks/index.html
  71. +5 −5 blog/jquery-ajax-cache/index.html
  72. +5 −5 blog/jquery-ajax-loader/index.html
  73. +5 −5 blog/jquery-countdown-plugins/index.html
  74. +5 −5 blog/jquery-css3-flip-plugin/index.html
  75. +5 −5 blog/jquery-data-cache/index.html
  76. +5 −5 blog/jquery-drop-down-lists/index.html
  77. +5 −5 blog/jquery-happyjs/index.html
  78. +5 −5 blog/jquery-hoverpulse/index.html
  79. +5 −5 blog/jquery-html-forms/index.html
  80. +5 −5 blog/jquery-jscrollpane-display/index.html
  81. +5 −5 blog/jquery-not-initialize-all-things/index.html
  82. +5 −5 blog/jquery-notes-1/index.html
  83. +5 −5 blog/jquery-notes-2/index.html
  84. +5 −5 blog/jquery-plugin-format-number/index.html
  85. +5 −5 blog/jquery-plugin-timeago/index.html
  86. +5 −5 blog/jquery-slice-images-into-tiles/index.html
  87. +349 −0 blog/jquery-sprite/index.html
  88. +7 −5 blog/jquery-star-box/index.html
  89. +5 −5 blog/jquery-tags-manager/index.html
  90. +5 −5 blog/jquery-waterfall-infinitescroll/index.html
  91. +5 −5 blog/mailcheck-jquery-plugin/index.html
  92. +5 −5 blog/note-marketing/index.html
  93. +5 −5 blog/octopress-notes-1/index.html
  94. +5 −5 blog/octopress-notes-2/index.html
  95. +52 −52 blog/page/2/index.html
  96. +52 −50 blog/page/3/index.html
  97. +50 −50 blog/page/4/index.html
  98. +50 −50 blog/page/5/index.html
  99. +50 −50 blog/page/6/index.html
  100. +50 −50 blog/page/7/index.html
  101. +50 −7 blog/page/8/index.html
  102. +5 −5 blog/parallax-scrolling/index.html
  103. +5 −5 blog/phonegap-first/index.html
  104. +5 −5 blog/responsive-tables/index.html
  105. +5 −5 blog/sticky-object/index.html
  106. +5 −5 blog/stop-wasting-time-for-ie/index.html
  107. +5 −5 blog/twitter-bootstrap/index.html
  108. +5 −5 blog/vmware-windows-8/index.html
  109. +5 −5 blog/windows8-notifications/index.html
  110. +5 −5 blog/work-1/index.html
  111. +52 −52 index.html
  112. +6 −2 sitemap.xml
View
10 about/index.html
@@ -111,13 +111,17 @@ <h1 class="entry-title">About</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -133,10 +137,6 @@ <h1 class="entry-title">About</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
111 atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[apa]]></title>
<link href="http://blog.rx836.tw/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -14,6 +14,73 @@
<entry>
+ <title type="html"><![CDATA[[jQ-Plugin] 利用jQuery做CSS Sprite效果]]></title>
+ <link href="http://blog.rx836.tw/blog/jquery-sprite/"/>
+ <updated>2013-02-28T20:53:00+08:00</updated>
+ <id>http://blog.rx836.tw/blog/jquery-sprite</id>
+ <content type="html"><![CDATA[<p><img src="https://lh5.googleusercontent.com/-NrgYmV2EGjs/US9R96MMebI/AAAAAAAACSw/nQUtJ_0HHqc/s372/css-sprite.gif" /></p>
+
+<p>為了讓網站對Server的請求次數減少,有些人會運用到 <strong>CSS Sprite</strong> 的技巧,將所有的小圖合併成一張大圖,再利用 <strong>background-position</strong> 來進行定位,但事先的圖片合併規劃,為了算那些位置,不免覺得稍嫌麻煩,但其實有快速合併成大圖的方法,之前曾經寫過一篇<a href="http://blog.rx836.tw/blog/introduce-compass/" target="_blank">[CSS] 用了就無法回頭的Compass</a>,有興趣的人可以參考</p>
+
+<!--more-->
+
+
+<p>要運用 CSS Sprite 的技巧,要自己撰寫其實也不難,不過善用 <a href="http://yangkun.github.com/jquery-sprite/#usage" target="_blank">Jquery-sprite</a>,可以更容易來做到這件事情</p>
+
+<h2>Start</h2>
+
+<p>首先可以從 github 下載 js 檔</p>
+
+<p><a href="https://github.com/yangkun/jquery-sprite">DOWNLOAD</a></p>
+
+<p>html部份</p>
+
+<pre><code>&lt;div id="swap"&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+
+<p>js部份</p>
+
+<pre><code>$('#swap span.google-sprite').each(function(i) {
+ var sprite = $(this).sprite(googleOpts).hover(function() {
+ sprite.col(6);
+ },function() {
+ sprite.col(0);
+ });
+ sprite.row(i);
+});
+</code></pre>
+
+<p>這邊利用 <strong>.each()</strong> 是因為範例有好幾張圖做變化,在每個圖上加上 <strong>.hover()</strong></p>
+
+<h3>當滑鼠移入時</h3>
+
+<p>就會變化到 <strong>sprite.col(6)</strong>,這個指定的位置</p>
+
+<h3>當滑鼠移出時</h3>
+
+<p>就會回到 <strong>sprite.col(0)</strong>,這個指定的位置</p>
+
+<p>原理其實就是在大圖上面將每個小圖畫分位置,利用 row 和 col 的概念來變換相對的位置</p>
+
+<p>想看更多的範例可以參考 <a href="http://yangkun.github.com/jquery-sprite/" target="_blank">這裡</a></p>
+
+<h2>參考資料:</h2>
+
+<p><a href="http://yangkun.github.com/jquery-sprite/" target="_blank">Jquery-sprite</a></p>
+
+<p>內容如有錯誤,歡迎指正</p>
+]]></content>
+ </entry>
+
+ <entry>
<title type="html"><![CDATA[[jQ-Plugin] 在網站中加入星星評分效果]]></title>
<link href="http://blog.rx836.tw/blog/jquery-star-box/"/>
<updated>2013-01-29T11:46:00+08:00</updated>
@@ -2497,46 +2564,4 @@ function Numeral (number) {
]]></content>
</entry>
- <entry>
- <title type="html"><![CDATA[[好書分享] 開放式領導]]></title>
- <link href="http://blog.rx836.tw/blog/book-review-6/"/>
- <updated>2012-12-01T23:59:00+08:00</updated>
- <id>http://blog.rx836.tw/blog/book-review-6</id>
- <content type="html"><![CDATA[<p><img src="https://lh4.googleusercontent.com/-HyLDQMw16fo/ULo4id1YO-I/AAAAAAAAB_8/z9LHSm1m9EY/s348/%25E9%2596%258B%25E6%2594%25BE%25E5%25BC%258F%25E9%25A0%2598%25E5%25B0%258E%25E5%25B0%2581%25E9%259D%25A2.jpg" /></p>
-
-<p>這本書其實是從Facebook別人分享得知的,「開放式領導」這個詞,老實說也是我看到書名後,才第一次認識到,很幸運的除了自己看書以外,還很有幸的參加了HPX,其中有一群人組了這本書的讀書會,在最後一次聚會時所分享的結論,讓我更加了解這本書的內容</p>
-
-<!--more-->
-
-
-<p>首先在這本書的封面,其實已經說明了開放式領導的重點,就是</p>
-
-<p><strong>分享</strong></p>
-
-<p><strong>參與</strong></p>
-
-<p><strong>互動</strong></p>
-
-<p>要想朝「開放式領導」方向前進,首先必須要讓整個組織有共同的願景,我個人覺得這非常的重要,如果一家公司沒有共同的方向,會讓底下的員工覺得,今天我為何而做?為何而戰?為何而犧牲假日加班?當心中有很多為什麼的時候,員工會因為猶豫而無法做更多,書中有一段是這麼說的</p>
-
-<p>「當你們分享願景和策略的時候,這些人會主動來找你,問說:『我可以幫你什麼忙?』他們對於這個理念的掌握是出於個人的層次,而且願意傾注全部的心力來支持這項策略」</p>
-
-<h3>分享,是首當要務</h3>
-
-<p>共同的願景之後,就是讓大家一起參與,但「開放式領導」雖然講求開放,但某些情況下還是會有所規範和限制,書中有提到可以運用沙坑公約,也就是建立沙坑範圍,讓大家知道規則是什麼,就跟桌遊一樣,是規則建立起遊戲,因為有了規則,才能讓遊戲進行下去,同時也能避免許多糾紛</p>
-
-<h3>溝通、溝通、再溝通</h3>
-
-<p>建立起彼此的信任,多與每個人互動,聽聽每個人的想法,建立共同的願景、目標,最終一起朝同個方向努力,這是我讀開放式領導這本書的心得感想</p>
-
-<p>另外有興趣的人可以延伸閱讀這本書</p>
-
-<p><a href="http://www.books.com.tw/exep/prod/booksfile.php?item=0010494708" target="_blank">想好了就豁出去:人生不能只做有把握的事,鞋王謝家華這樣找出勝算</a></p>
-
-<p>因為 開放x創新,而造就了這家公司的成功,可說是開放式領導之典範</p>
-
-<p>如有想法,歡迎一起提出討論</p>
-]]></content>
- </entry>
-
</feed>
View
10 blog/2-vmware-windows-8/index.html
@@ -276,13 +276,17 @@ <h1 class="entry-title">[學習筆記] 簡單容易,如何在VM裝Windows 8來
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -298,10 +302,6 @@ <h1 class="entry-title">[學習筆記] 簡單容易,如何在VM裝Windows 8來
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/5-css-properties/index.html
@@ -516,13 +516,17 @@ <h1 class="entry-title">[CSS] 5個對設計師有幫助的CSS屬性</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -538,10 +542,6 @@ <h1 class="entry-title">[CSS] 5個對設計師有幫助的CSS屬性</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/5-html5-api-you-did-not-know/index.html
@@ -336,13 +336,17 @@ <h1 class="entry-title">[HTML5] 5個你可能不知道的HTML5 API</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -358,10 +362,6 @@ <h1 class="entry-title">[HTML5] 5個你可能不知道的HTML5 API</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/alert-confirm-prompt/index.html
@@ -281,13 +281,17 @@ <h1 class="entry-title">[jQ-Plugin] 用jQuery打造alert、confirm和prompt Dial
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -303,10 +307,6 @@ <h1 class="entry-title">[jQ-Plugin] 用jQuery打造alert、confirm和prompt Dial
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/android-facebook-key-hashes/index.html
@@ -255,13 +255,17 @@ <h1 class="entry-title">[PhoneGap] Android開發Facebook取得Key Hashes</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -277,10 +281,6 @@ <h1 class="entry-title">[PhoneGap] Android開發Facebook取得Key Hashes</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/android-phonegap-usb-develop/index.html
@@ -263,13 +263,17 @@ <h1 class="entry-title">[PhoneGap] 如何搭配平板或手機開發Android</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -285,10 +289,6 @@ <h1 class="entry-title">[PhoneGap] 如何搭配平板或手機開發Android</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
36 blog/archives/index.html
@@ -9,9 +9,9 @@
<meta name="author" content="阿帕">
- <meta name="description" content="Blog Archive 2013 [jQ-Plugin] 在網站中加入星星評分效果
-Jan 29 2013 posted in jQ-Plugin [jQ-Plugin] 用jQuery打造alert、confirm和prompt dialogs
-Jan 24 2013 posted in &hellip;">
+ <meta name="description" content="Blog Archive 2013 [jQ-Plugin] 利用jQuery做CSS Sprite效果
+Feb 28 2013 posted in jQ-Plugin [jQ-Plugin] 在網站中加入星星評分效果
+Jan 29 2013 posted in jQ-Plugin [jQ- &hellip;">
<!-- http://t.co/dKP3o1e -->
@@ -35,9 +35,9 @@
<meta property="fb:app_id" content="416172151763823" />
<meta property="og:title" content="Blog Archive - apa" />
-<meta property="og:description" content="Blog Archive 2013 [jQ-Plugin] 在網站中加入星星評分效果
-Jan 29 2013 posted in jQ-Plugin [jQ-Plugin] 用jQuery打造alert、confirm和prompt dialogs
-Jan 24 2013 posted in &hellip;" />
+<meta property="og:description" content="Blog Archive 2013 [jQ-Plugin] 利用jQuery做CSS Sprite效果
+Feb 28 2013 posted in jQ-Plugin [jQ-Plugin] 在網站中加入星星評分效果
+Jan 29 2013 posted in jQ-Plugin [jQ- &hellip;" />
<meta property="og:url" content="http://blog.rx836.tw/blog/archives/" />
@@ -104,6 +104,20 @@ <h1 class="entry-title">Blog Archive</h1>
<article>
+<h1><a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a></h1>
+<time datetime="2013-02-28T20:53:00+08:00" pubdate><span class='month'>Feb</span> <span class='day'>28</span> <span class='year'>2013</span></time>
+
+<footer>
+ <span class="categories">posted in <a class='category' href='/blog/categories/jq-plugin/'>jQ-Plugin</a></span>
+</footer>
+
+
+</article>
+
+
+
+<article>
+
<h1><a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a></h1>
<time datetime="2013-01-29T11:46:00+08:00" pubdate><span class='month'>Jan</span> <span class='day'>29</span> <span class='year'>2013</span></time>
@@ -1193,13 +1207,17 @@ <h1 class="entry-title">Blog Archive</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -1215,10 +1233,6 @@ <h1 class="entry-title">Blog Archive</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-1/index.html
@@ -234,13 +234,17 @@ <h1 class="entry-title">[好書分享] 只剩下一個角落的繁華</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -256,10 +260,6 @@ <h1 class="entry-title">[好書分享] 只剩下一個角落的繁華</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-2/index.html
@@ -218,13 +218,17 @@ <h1 class="entry-title">[好書分享] 疼痛,才叫青春</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -240,10 +244,6 @@ <h1 class="entry-title">[好書分享] 疼痛,才叫青春</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-3/index.html
@@ -216,13 +216,17 @@ <h1 class="entry-title">[好書分享] 預見未來</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -238,10 +242,6 @@ <h1 class="entry-title">[好書分享] 預見未來</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-4/index.html
@@ -226,13 +226,17 @@ <h1 class="entry-title">[好書分享] 社群效應:小圈圈如何改變世界<
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -248,10 +252,6 @@ <h1 class="entry-title">[好書分享] 社群效應:小圈圈如何改變世界<
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-5/index.html
@@ -224,13 +224,17 @@ <h1 class="entry-title">[好書分享] 為什麼搜尋將被淘汰</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -246,10 +250,6 @@ <h1 class="entry-title">[好書分享] 為什麼搜尋將被淘汰</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-6/index.html
@@ -228,13 +228,17 @@ <h1 class="entry-title">[好書分享] 開放式領導</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -250,10 +254,6 @@ <h1 class="entry-title">[好書分享] 開放式領導</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
2  blog/categories/css/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: CSS | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/css/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/css/index.html
@@ -321,13 +321,17 @@ <h1 class="entry-title">Category: CSS</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -343,10 +347,6 @@ <h1 class="entry-title">Category: CSS</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
2  blog/categories/facebook/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Facebook | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/facebook/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/facebook/index.html
@@ -178,13 +178,17 @@ <h1 class="entry-title">Category: Facebook</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -200,10 +204,6 @@ <h1 class="entry-title">Category: Facebook</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
2  blog/categories/html5/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: HTML5 | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/html5/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/html5/index.html
@@ -136,13 +136,17 @@ <h1 class="entry-title">Category: HTML5</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -158,10 +162,6 @@ <h1 class="entry-title">Category: HTML5</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
2  blog/categories/javascript/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: JavaScript | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/javascript/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/javascript/index.html
@@ -206,13 +206,17 @@ <h1 class="entry-title">Category: JavaScript</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -228,10 +232,6 @@ <h1 class="entry-title">Category: JavaScript</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
250 blog/categories/jq-plugin/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: jQ-Plugin | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/jq-plugin/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -14,6 +14,73 @@
<entry>
+ <title type="html"><![CDATA[[jQ-Plugin] 利用jQuery做CSS Sprite效果]]></title>
+ <link href="http://blog.rx836.tw/blog/jquery-sprite/"/>
+ <updated>2013-02-28T20:53:00+08:00</updated>
+ <id>http://blog.rx836.tw/blog/jquery-sprite</id>
+ <content type="html"><![CDATA[<p><img src="https://lh5.googleusercontent.com/-NrgYmV2EGjs/US9R96MMebI/AAAAAAAACSw/nQUtJ_0HHqc/s372/css-sprite.gif" /></p>
+
+<p>為了讓網站對Server的請求次數減少,有些人會運用到 <strong>CSS Sprite</strong> 的技巧,將所有的小圖合併成一張大圖,再利用 <strong>background-position</strong> 來進行定位,但事先的圖片合併規劃,為了算那些位置,不免覺得稍嫌麻煩,但其實有快速合併成大圖的方法,之前曾經寫過一篇<a href="http://blog.rx836.tw/blog/introduce-compass/" target="_blank">[CSS] 用了就無法回頭的Compass</a>,有興趣的人可以參考</p>
+
+<!--more-->
+
+
+<p>要運用 CSS Sprite 的技巧,要自己撰寫其實也不難,不過善用 <a href="http://yangkun.github.com/jquery-sprite/#usage" target="_blank">Jquery-sprite</a>,可以更容易來做到這件事情</p>
+
+<h2>Start</h2>
+
+<p>首先可以從 github 下載 js 檔</p>
+
+<p><a href="https://github.com/yangkun/jquery-sprite">DOWNLOAD</a></p>
+
+<p>html部份</p>
+
+<pre><code>&lt;div id="swap"&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+ &lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+
+<p>js部份</p>
+
+<pre><code>$('#swap span.google-sprite').each(function(i) {
+ var sprite = $(this).sprite(googleOpts).hover(function() {
+ sprite.col(6);
+ },function() {
+ sprite.col(0);
+ });
+ sprite.row(i);
+});
+</code></pre>
+
+<p>這邊利用 <strong>.each()</strong> 是因為範例有好幾張圖做變化,在每個圖上加上 <strong>.hover()</strong></p>
+
+<h3>當滑鼠移入時</h3>
+
+<p>就會變化到 <strong>sprite.col(6)</strong>,這個指定的位置</p>
+
+<h3>當滑鼠移出時</h3>
+
+<p>就會回到 <strong>sprite.col(0)</strong>,這個指定的位置</p>
+
+<p>原理其實就是在大圖上面將每個小圖畫分位置,利用 row 和 col 的概念來變換相對的位置</p>
+
+<p>想看更多的範例可以參考 <a href="http://yangkun.github.com/jquery-sprite/" target="_blank">這裡</a></p>
+
+<h2>參考資料:</h2>
+
+<p><a href="http://yangkun.github.com/jquery-sprite/" target="_blank">Jquery-sprite</a></p>
+
+<p>內容如有錯誤,歡迎指正</p>
+]]></content>
+ </entry>
+
+ <entry>
<title type="html"><![CDATA[[jQ-Plugin] 在網站中加入星星評分效果]]></title>
<link href="http://blog.rx836.tw/blog/jquery-star-box/"/>
<updated>2013-01-29T11:46:00+08:00</updated>
@@ -440,185 +507,4 @@ alertify.alert("獎品將在三天後寄出");
]]></content>
</entry>
- <entry>
- <title type="html"><![CDATA[[jQ-Plugin] 做出磁磚效果變化的圖片轉換]]></title>
- <link href="http://blog.rx836.tw/blog/jquery-slice-images-into-tiles/"/>
- <updated>2013-01-18T16:36:00+08:00</updated>
- <id>http://blog.rx836.tw/blog/jquery-slice-images-into-tiles</id>
- <content type="html"><![CDATA[<p><img src="https://lh4.googleusercontent.com/-WH3Ni1ou3Ww/UPkk71vSTvI/AAAAAAAACMk/hcFofq9eTuU/s641/2013-01-18_164425.jpg" /></p>
-
-<p>不知道大家有沒有看過這種切成一塊一塊的轉換圖片,類似磁磚拼貼的效果,最近看到一篇講解教學的文章,自己消化了一下,來分享並且紀錄下來</p>
-
-<!--more-->
-
-
-<h2>Start</h2>
-
-<p>首先是HTML部份</p>
-
-<pre><code>&lt;div class="sliced"&gt;
- &lt;img src="pic.jpg"/&gt;
-&lt;/div&gt;
-</code></pre>
-
-<p>只用一個&lt;div&gt;包住一個&lt;img&gt;</p>
-
-<p>接著是CSS</p>
-
-<pre><code>.sliced {
- position: relative;
- width: 640px;
- height: 400px;
-}
-</code></pre>
-
-<p>因為我們要將效果自製成一個jQuery plugin,方便以後可以重複使用,所以這邊要先建立一個基本的 jQuery plugin 樣板</p>
-
-<pre><code>;(function( $, window ) {
-
- //預設值
- var _defaults = {
- x : 2, // 預設對圖片x軸要切幾塊
- y : 2, // 預設對圖片y軸要切幾塊
- random : true, // 磚塊是否要按照順序切換
- speed : 2000 // 效果的速度
- };
-
- $.fn.sliced = function( options ) {
-
- var o = $.extend( {}, _defaults, options );
-
- return this.each(function() {
- var $container = $(this); // cache selector for best performance
- // 主要程式碼從這裡開始寫
-
- });
- };
-
-}( jQuery, window ));
-</code></pre>
-
-<p>當然如果想要寫其他 Plugin 的人,也可以使用這個樣板去做修改</p>
-
-<h3>原理</h3>
-
-<p>做好基本的準備工作以後,我們要來開始撰寫主程式部分,但在撰寫之前,先來說明一下這個效果是如何產生,其實原理很簡單,在效果執行時,會先將原圖的屬性設為 <strong>display: none</strong>,接著加上&lt;div&gt;並且設定背景圖片,類似拼圖一樣一塊一塊拼出原圖,如果覺得我描述的不清楚的話,下面有範例可以參考XD</p>
-
-<p><a href="http://jsfiddle.net/rx836/sbBeA/" target="_blank">範例</a></p>
-
-<p>這邊的重點在於 <strong>background-position</strong> 這個屬性,利用這個屬性做背景圖片的位移,每一個&lt;div&gt;代表著圖片的一個區塊,也許有些人看到這邊已經知道端倪,因為只要把圖片轉換成一個一個的&lt;div&gt;,透過操作每個&lt;div&gt;,就可以做出特效</p>
-
-<p>接著我們把程式碼寫完,先建立一些變數</p>
-
-<pre><code>var width = $container.width(),
- height = $container.height(),
- $img = $container.find('img'),
- n_tiles = o.x * o.y,
- tiles = [], $tiles;
-</code></pre>
-
-<p>接著是建立一塊一塊的磁磚,並且把原圖隱藏,最後加上剛建立好的磁磚,至於要建立多少個就看當初給予的值</p>
-
-<pre><code>for ( var i = 0; i &lt; n_tiles; i++ ) {
- tiles.push('&lt;div class="tile"/&gt;');
-}
-
-$tiles = $( tiles.join('') );
-
-//將原圖隱藏並加上磁磚
-$img.hide().after( $tiles );
-</code></pre>
-
-<p>接著利用原始圖檔當作每個磁磚的背景圖,在將背景圖做適當的位移,至於要位移多少,就看每個&lt;div&gt;(也就是每個磁磚)所代表的區塊</p>
-
-<pre><code>//利用原始圖檔當作磁磚背景圖
-$tiles.css({
- width: width / o.x,
- height: height / o.y,
- backgroundImage: 'url('+ $img.attr('src') +')'
-});
-
-//替背景圖調整位置
-$tiles.each(function() {
- var pos = $(this).position();
- console.log(pos);
- $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
-});
-</code></pre>
-
-<p>因為要拼成一塊圖片的關係,所以也要利用 float這個屬性,直接在CSS加上即可</p>
-
-<pre><code>.tile { float: left; }
-</code></pre>
-
-<p>到這邊為止,你可以加上下面這段程式碼,看看效果如何</p>
-
-<pre><code>$('.sliced').sliced({ x:4, y:4 }); // 將圖片切成4x4
-</code></pre>
-
-<p>看圖片好像沒什麼改變,但打開firebug看看HTML部份,有發現到不一樣了嗎?</p>
-
-<p><img src="https://lh5.googleusercontent.com/-t0N7b55zbPE/UPkk8Kc6OaI/AAAAAAAACMo/1L6StJdwJ3s/s1026/2013-01-18_180320.jpg" /></p>
-
-<p>就如剛剛所敘述的,<strong>原始圖片已經隱藏,並且用&lt;div&gt;拼湊而出</strong></p>
-
-<h3>製作效果</h3>
-
-<p>知道了原理以後,接著讓我們繼續把程式碼繼續寫完,接下來是隨機變換的部份</p>
-
-<pre><code>function range( min, max, rand ) {
- var arr = ( new Array( ++max - min ) )
- .join('.').split('.')
- .map(function( v,i ){ return min + i });
- return rand
- ? arr.map(function( v ) { return [ Math.random(), v ] })
- .sort().map(function( v ) { return v[ 1 ] })
- : arr;
-}
-</code></pre>
-
-<p>這部份的 code 可以參考 <a href="http://stackoverflow.com/questions/12528886/random-but-just-in-chrome" target="_blank">stackoverflow</a>,簡單來說就是一個產生<strong>特定範圍的隨機排列的數字</strong>,但因為是函式的關係我們要把他跟一開始<strong>建立預設值 var _defaults 放在一起</strong>,剩下的 code 就是處理切換效果的部份</p>
-
-<pre><code>var tilesArr = range( 0, n_tiles, o.random ),
-tileSpeed = o.speed / n_tiles;
-
-$container.on( 'animate', function() {
-
- tilesArr.forEach(function( tile, i ) {
- setTimeout(function(){
- $tiles.eq( tile ).toggleClass( 'tile-animated' );
- }, i * tileSpeed );
- });
-
-});
-</code></pre>
-
-<p>我們將每個磁磚加上animate,在特定時間內做 opacity 屬性的變化,最後加上一個按鈕做觸發,和套用plugin,看看效果如何</p>
-
-<p>html</p>
-
-<pre><code>&lt;button&gt;Toggle&lt;/button&gt;
-</code></pre>
-
-<p>js</p>
-
-<pre><code>$('button').click(function() {
- $('.sliced').trigger('animate');
-});
-</code></pre>
-
-<p><a href="http://jsfiddle.net/rx836/jQaJh/2/" target="_blank">完整的範例</a></p>
-
-<h2>結論</h2>
-
-<p>只要知道是拼圖的概念,就可以知道其實不是針對原圖去做變化,巧妙的利用&lt;div&gt;也可以做出類似flash的效果</p>
-
-<h3>參考資料:</h3>
-
-<p><a href="http://www.onextrapixel.com/2012/11/23/how-to-slice-images-into-tiles-with-jquery-and-css3-transitions/" target="_blank">How to Slice Images into Tiles with jQuery and CSS3 Transitions</a></p>
-
-<p>內容如有錯誤,歡迎指正</p>
-]]></content>
- </entry>
-
</feed>
View
24 blog/categories/jq-plugin/index.html
@@ -100,6 +100,20 @@ <h1 class="entry-title">Category: jQ-Plugin</h1>
<article>
+<h1><a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a></h1>
+<time datetime="2013-02-28T20:53:00+08:00" pubdate><span class='month'>Feb</span> <span class='day'>28</span> <span class='year'>2013</span></time>
+
+<footer>
+ <span class="categories">posted in <a class='category' href='/blog/categories/jq-plugin/'>jQ-Plugin</a></span>
+</footer>
+
+
+</article>
+
+
+
+<article>
+
<h1><a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a></h1>
<time datetime="2013-01-29T11:46:00+08:00" pubdate><span class='month'>Jan</span> <span class='day'>29</span> <span class='year'>2013</span></time>
@@ -349,13 +363,17 @@ <h1 class="entry-title">Category: jQ-Plugin</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -371,10 +389,6 @@ <h1 class="entry-title">Category: jQ-Plugin</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
2  blog/categories/jquery/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: jQuery | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/jquery/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/jquery/index.html
@@ -374,13 +374,17 @@ <h1 class="entry-title">Category: jQuery</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -396,10 +400,6 @@ <h1 class="entry-title">Category: jQuery</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
2  blog/categories/octopress/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Octopress | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/octopress/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/octopress/index.html
@@ -150,13 +150,17 @@ <h1 class="entry-title">Category: Octopress</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -172,10 +176,6 @@ <h1 class="entry-title">Category: Octopress</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
2  blog/categories/phonegap/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: PhoneGap | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/phonegap/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/phonegap/index.html
@@ -150,13 +150,17 @@ <h1 class="entry-title">Category: PhoneGap</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -172,10 +176,6 @@ <h1 class="entry-title">Category: PhoneGap</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
2  blog/categories/win8/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Win8 | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/win8/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/win8/index.html
@@ -164,13 +164,17 @@ <h1 class="entry-title">Category: Win8</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -186,10 +190,6 @@ <h1 class="entry-title">Category: Win8</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
2  blog/categories/好書分享/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: 好書分享 | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/好書分享/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/好書分享/index.html
@@ -192,13 +192,17 @@ <h1 class="entry-title">Category: 好書分享</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -214,10 +218,6 @@ <h1 class="entry-title">Category: 好書分享</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
2  blog/categories/學習筆記/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: 學習筆記 | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/學習筆記/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-01-29T14:44:23+08:00</updated>
+ <updated>2013-02-28T21:01:21+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/學習筆記/index.html
@@ -237,13 +237,17 @@ <h1 class="entry-title">Category: 學習筆記</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -259,10 +263,6 @@ <h1 class="entry-title">Category: 學習筆記</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/create-lazy-loading/index.html
@@ -249,13 +249,17 @@ <h1 class="entry-title">[jQ-Plugin] 圖片延遲加載-Lazy-Loading</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
@@ -271,10 +275,6 @@ <h1 class="entry-title">[jQ-Plugin] 圖片延遲加載-Lazy-Loading</h1>
<a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
</li>
- <li class="post">
- <a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
- </li>
-
</ul>
</section>
View
10 blog/css-cursor-rule/index.html
@@ -267,13 +267,17 @@ <h1 class="entry-title">[CSS] 關於CSS Cursor</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (17)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>