2013年4月11日 星期四

【jQuery】使用jQuery製作仿Flash的動畫效果

去年底公司官網header部分要替換動畫效果因應聖誕節與新年,但由於公司考量到越來越多人使用行動裝置,某些行動裝置可能無法讀取Flash效果,所以改以jQuery效果達成。

至於本篇文章範例,礙於不便用公司的圖檔作demo,所以畫面圖檔是使用:

  • 原始圖檔來源
  • Designed By : Visionmates
  • Author Website : http://www.visionmates.com/
  • License / Usage details: Free for personal and non commercial use
  • 感謝 崇創意 協助圖片去背處理。

線上看範例請點我

2013年4月5日 星期五

【jQuery】使用jQuery ui中的show Effects自製照片輪播

照片輪播其實網路上也一樣有很多套件可以用,這次公司設計同事需求:

除了照片輪播,上方還要顯示幾之幾(目前第幾張 / 總張數)。

這樣的需求,網路上仍然找的到套件,但由於我不是很理解設計同事卡在哪個點不喜歡那個套件,所以還是得試著自己寫出一個,不管是照片list或是幾之幾區塊都用div包附,最後設計同事可以自行調整div的css樣式與位置,而我這邊就是提供js輪播語法與大圖html結構規則。

線上看範例請點我

2013年4月1日 星期一

【jQuery】使用jQuery的blockUI自製lightbox效果照片牆

關於lightbox照片牆效果,其實網路上可以找到蠻多套件可以使用,可是如果找不到適合的或想要的,或是希望畫面樣式都可以自己控制時就須要試著自己處理(本範例僅呈現簡易的js程式碼使用,無特別設計樣式),以下是本次需求:

  • 原始照片列表(A)不需click,滑鼠mouseover時即觸發lightbox(B)。
  • 觸發的lightbox(B)上會重新顯示所有原始照片列表(A)上的照片(小圖),並將大圖替換成選中圖、選中小圖加框線以區分是否為選中圖。

線上看範例請點我

2013年3月26日 星期二

【CSS3】使用jQuery的DOM操作、CSS3的transform製作風車旋轉效果

在jQuery出現後,有蠻多的機率遇到需要使用他來製作一些客戶想要的效果,大部分的需求都大同小異,但是風車旋轉,是我第一次遇到。

線上看範例請點我

跟平常搜尋一樣,以為關鍵字輸入「jQuery 旋轉 或 特效」之類的字眼,會得到jquery本身的一些用法或套件,但似乎沒有,不過到是查到很多CSS3跟旋轉有關的文章。

由於本篇主要是要介紹旋轉,也就是transform中的rotate,所以transform其餘屬性不特別描述,如果有需要詳細了解CSS3中transform的用法,以下推薦兩篇文章:

  • 文章一:關於transform各個屬型、用法的說明與demo。
  • 文章二:這作者介紹的方式很生動很有趣,可以很清楚理解抽像的transform。
找不到jQuery有任何關於旋轉的資料,又看過transform:rotate的介紹後,當下就決定要利用CSS3來達成。

2013年3月20日 星期三

【Google Maps】(二)資訊視窗infowindow與MarkerClusterer

若還未有初始化定位地圖與增加標記點的觀念,請先查看:【Google Maps】(一) 初始化地圖與透過地址轉換經緯度重新定位地圖位置

本篇文章要介紹的是如何在Google Maps各個標記點Marker建立資訊視窗infowindow,並且透過MarkerClusterer群聚多個標記點Marker。

預先看線上demo請點我

網路上查地圖位置資料,有時候可以看到某些地圖在搜尋結果的標記點Marker滑鼠點擊後,地圖上方會出現一個像對話泡泡框的區塊,在Google Maps中稱為資訊視窗,也就是infowindow,infowindow的主要使用方式如下:
 
   var infowindow = new google.maps.InfoWindow();  
   infowindow.setContent("設定資訊視窗內容");
   infowindow.open(mapObj,markerObj);

setContent 用來設定開啟的資訊視窗infowindow的內容。
open
  • 參數1:要顯示資訊視窗的map物件。
  • 參數2:開啟的資訊視窗所附加、關連的標記點Marker物件。
詳細infowindow介紹請點我,其他infowindow使用方式reference請點我

2013年3月10日 星期日

【Google Maps】(一) 初始化地圖與透過地址轉換經緯度重新定位地圖位置

一年前因為專案需求,曾經研究google map一段時間,最近東翻西找終於找到之前練習的程式碼,想說要來整理整理,但因為,我想很多人都知道,api麻,總是有可能會更新的(例如:Facebook就是一個很好的例子>"<),所以還是需要重新上官網看看有沒有差異、並且重新回憶一下~

一上官網我就先疑惑了一下,因為記得之前研究時官網上說,v3版已經不需要申請金鑰即可使用,但這次...
http://goo.gl/EuNd5  這裡說要金鑰!!!?
http://goo.gl/iDeDa   這裡又說已經不用!!!?
我都糊塗了 囧 ㄚㄚㄚㄚ~~~

好吧,說實話我真的很懶,我懶得再去爬官網上的蛛絲馬跡,
網路上看到兩篇文章提到...

這裡 http://goo.gl/Yc0tU 和這裡 http://goo.gl/pLf02

所以...同一頁面免費存取次數為25000次,超過才需收費!?
我只是想demo~~應該不用吧!? 哈哈哈 (不負責任發言XD)

預先看線上demo請點我

2013年3月6日 星期三

【jQuery】如何讓datepicker中某些特定日期不可選?

由於最近有個案子客戶需要頁面上出現連續兩個月份的日期並且可設定特定日期不可點選,因為一直以來日曆部分我都是採用jquery ui中的datepicker,所以一聽到客戶這樣的需求就直接往jquery ui官網中查詢。

預先看線上demo請點我

過程說明如下:

首先,先載入必要的檔案:
 






jquery-ui-blitzer.css 套用jquery ui的css
jquery-1.7.2.min.js 必須先載入jquery的js檔,後續才能使用相關的jquery語法
jquery-ui.min.js 由於datepicker是jquery ui裡的工具,所以需要載入jquery ui的js檔
ui.datepicker-zh-TW.js 由於datepicker上的文字預設都是英文,若需要以中文呈現可另外載入此js檔
date_process.js 稍後關於本文效果的js


2013年3月4日 星期一

如何變更IIS7下的網站開發目錄?

由於安裝IIS後,網站開發目錄預設也是在C槽:C:\inetpub\wwwroot,
所以為了避免日後電腦重灌或還原需要備份C槽內的網站開發程式,
應該很多人會跟我一樣選擇將開發目錄進行變更。

先前測試如何將IIS7與Apache共存?時也同時研究了變更IIS7下的網站開發目錄部分,
實際操作方式稱之為「建立虛擬目錄」。

如何讓IIS7與Apache共存?

記得很久以前曾經想要在自己電腦上同時執行Apache與IIS,
但礙於一些因素遲遲未仔細實際研究加測試,當時只知道同時安裝後無法同時使用,
前陣子實地爬文測試後才了解到:

Apache與IIS兩者其實是可以共存的,只是不能使用相同的Port
由於Apache與IIS預設都會佔80 port,所以只要把兩者的port設為不同即可同時共存。

以本次實際測試為例,由於我是先安裝了Apache,所以80 port已被Apache佔去,
接著再安裝IIS,由於IIS也是預設佔80 port,兩者產生衝突,因此IIS便無法啟動。

2013年3月3日 星期日

如何將win7設為WiFi熱點

因為工作,偶然認識了網路上頗有名氣的香腸(香腸炒魷魚),初見面時除了說聲「久仰大名」,我似乎還說了句類似「我從小看您部落格長大」的話,香腸哥「您」不介意吧? 哈哈

拖香腸的福,終於有了也想自己把一些工作上或生活中的筆記放上部落格的行動力,今天,第一篇文章就從電腦中N個筆記開始吧~

先前曾經為了想將自己的win7設置wifi熱點供自己使用所以上網查了一些說明,隨後因為也有朋友有這個需求所以整理了個精簡版教學給朋友,以下精簡版步驟非常適合不喜歡看大量文字的朋友喔XD
writing for work~writing for life~