2011年4月19日 星期二

研究 jQuery 輪播(轉場) 特效

1.InnerFade 範例 下載
http://medienfreunde.com/lab/innerfade/jquery.innerfade.zip
InnerFade 提供了三種輪播效果,我們可以在 index.htm 調整它的顯示速度及相關參數:

1. News輪播
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});


2. 圖片輪播
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});


3. 段落輪播
$('.fade').innerfade({
speed: 1000,
timeout: 6000,
type: 'random_start',
containerheight: '1.5em'
});


修改要輪播的資料:

1. News輪播
<ul id="news">
<li>
<a href="#n1">1 Lorem ipsum dolor</a>
</li>
<li>
<a href="#n2">2 Sit amet, consectetuer</a>
</li>
...
...
</ul>

2. 圖片輪播
<ul id="portfolio">
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html"><img src="images/ggbg.gif" alt="Good Guy bad Guy" /></a>
</li>
...
...
</ul>

3. 段落輪播
<div class="fade">
<p> 段落 1 </p>
<p> 段落 2 </p>
...
...
</div>


資料來源:
http://www.xt-commerce.cn/forum/archive/index.php/t-83.html


相關網站:
SmallSlider圖片輪播插件
http://www.d2nb.com/smallslider/index.html

我的第2個 javascript Object 程式, 實作 jQuery 的 Fade 特效

第1個 javascript 實在 object 的是 swfupload
下載 URL:
https://sites.google.com/site/max32002/webapp/swfUpload_%E5%A4%9A%E6%AA%94%E4%B8%8A%E5%82%B3_20110309.zip?attredirects=0&d=1

第2個實作的 javascript object 是 maxFadeObj,
下載 URL:
https://sites.google.com/site/max32002/webapp/gallery.20110329.zip?attredirects=0&d=1

心得:
1. 原來要用 jQuery 要做出特效還滿簡單的.
2. javascript 裡寫 settings 和 object 會比較好在其他的情況下做修改, 比較好移植(重覆利用), 比較容易了解, 比較方便做修改. 缺點, 寫出第1個object 需要多一點時間.


setting 的寫法:
2. 圖片輪播
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});
再配合 extend() 來補齊不足的參數.


資料來源:
http://www.xt-commerce.cn/forum/archive/index.php/t-83.html


相關網站:
SmallSlider圖片輪播插件
http://www.d2nb.com/smallslider/index.html

除錯 flash 花了3小時

接到一個 flash 廣告輪播要內容要調整需求.

因為, 太有自信, 所以先用猜的, 以為只是小問題, 所以直接發佈到正式的環境做測試, 為了避免 browser cache swf 檔. 所以先清除掉 快取的暫存檔. 為了看 flash 取得及送出的 xml 檔正不正確, 再執行 fiddler2 來 debug. 每修改一次, 測試一次需要花5分~7分鐘.

東猜猜, 西猜猜, 都找不到實際的錯誤在那裡, 也改寫了很多地方的程式, 也都猜錯, 找不到實際出的錯誤在那裡, 最後就用正規的做法, 結果一下子就找到問題:
1. 先用假資料(實際的xml檔) 來取代從網路即時取得 xml.
2. 在程式碼裡, 加入 trace() 來輸出 debug 的資訊,

發現應該要被觸發事件的button 沒被觸發, 原來是有一個透明的圖層也被加入了 on(release) 事件, 上層的圖層的 on(release) 被執行, 被壓在下面的button 的 on(release) 就不會被執行. 移掉透明圖層裡的事件後, button 就變正常了.

用svn exprot 出貸時產生的錯誤來學習svn commit怎麼使用

畫面1: 裝機後的錯誤畫面.



trace 程式碼之後才發現是有少檔案,為什麼會少檔案呢?
原來是使用 svn 的 export, 沒有把所有的檔案都匯出來.
正確的 commit 方式, 請勾選 "show unversioned file"

Facebook 留言板