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
2011年4月19日 星期二
我的第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
下載 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 就變正常了.
因為, 太有自信, 所以先用猜的, 以為只是小問題, 所以直接發佈到正式的環境做測試, 為了避免 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怎麼使用
訂閱:
文章 (Atom)