[jQuery]利用animate來製作左右移動圖片展示器

這個範例應該有很多人做過了,十分實用,如果把圖片縮小些,然後再加上燈箱的效果,應該可以拿來當展示產品或是照片等資訊,這個範例的發想是由男丁格爾的範例[jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播來做修改的。

jQuery-Animate-API用法animate({css內容},[速度(整數)],[easing(linear/easein)],[callback])

想法,外層利用一個Div框住要製作動畫的內容,設定css的position: relative;然後內層的資料都用position: absolute;來設定left及top的pixel,如此可以把元件浮在最外層Div框的相對位置。

需要二個按鈕,浮在左邊及右邊,設定動作向左移及向右移。

畫面如下:範例網址

img元件設定title屬性的話,那文字會顯示在圖片下方一條bar上

jQueryAnimate1.png

Read More

[jQuery]淡出fade-Out,淡入fade-In及Ajax json資料範例

在使用Ajax功能時,一般規劃大都會是清空原本資料區域,顯示Loading畫面,取得資料及處理,然後把Loading移除後顯示回傳的資料,而以下這個範例會再多二個效果,在清空原本資料區域前先做淡出效果,而在取回資料顯示之前,做淡入的效果。

所以效果顯示的順序會是:

jQuery淡入淡山Ajax流程

而在資料傳遞方面則使用格式json,在取回json格式的資料後,依json Array使用for迴圈一個個附加append到資料區域裡。

Read More

[CSharp]把WebCam當QRCode的DeCode解碼器

QRCode的使用可分成編碼EnCode及解碼DeCode二部份,在各種平台上也有需多人依據編碼規則製作了許多可用的解碼與編碼器,之前文章也介紹過 [Java]QRCode產生VCard使用的是swetake這個framework,不過現在已經有統一的單位在研究 ZXing (“Zebra Crossing”) ,而且各種平台上均提供原始碼供大家使用,對於解碼DeCode、解碼EnCode及歪斜辨識效果、速度都讓人滿意。

二維條碼Quick Response Code的發展上大都份落在手機平台上,在桌機上不像是一般的一維條碼有專用的條碼機,所以在就只能利用WebCam的影像解析功能,即時拍照給QRCode解碼器zxing解碼DeCode。

執行畫面:

產生QRCode,使用kayway網站來產生QRCode

generator.png

Read More

[Java]猜數字大小的小遊戲Game

這是個十分簡單的小遊戲,主要是利用Eclipse搭配Virtual-Editor來拉畫面,再把行為寫入ActionListener裡監聽而已,主要控制都在Button按鈕的Click動作。

遊戲的概念是,由系統生成(?)設定一個數,以此程式為例,是由亂數產生的,而使用者在輸入框裡輸入要猜的數字,由按鈕”猜猜看”當獨發點,檢查輸入數字與系統設定的數字大小為何,並於TextArea顯示結果。此處還有另一個動作”答案”按鈕,可以顯示於TextArea系統的內定數字為何。

以下是結果畫面:

example1.png

按下答案按鈕會告知答案為何。

Read More

[Java]讀取InputRead及寫入OutputWrite檔案File

Input及Output也就是IO的存取上,不只有Console輸出、鍵盤輸入這種組合,很常用的還有檔案的讀取及寫入,Java在讀取及寫入檔案上可大略分成二部份,Binary元位組IO及純文字的IO。

常用的class均屬於java.io這個package裡,以下圖表是讀取File檔時可用的相關類別。其相關的api說明可以參考Oracle sun JDK api

JavaIO以行為來分的話,可分成輸出模組及輸入模組,輸出模組像是寫入檔案、輸出至Console,而輸入模組像是讀取檔案、鍵盤輸入等。在類別名稱上可以很清楚的判別,含有字詞Input或Reader就是輸入模組,而含有字詞Output或Writer就是輸出模組。

Java讀取檔案

Read More