2012年7月31日星期二

Less- 動態撰寫CSS

紅色死神發表於 2012年7月31日星期二 7月 31, 2012 / 沒有留言
標籤 css, less

因為手打css熟，之前就沒在碰像這樣可以把css程式化的工具，不過最近因為想玩一些新東西，所以就把Less也順便學一下。

要使用less，可以先到http://lesscss.org/下載最新版的less。

因為它可以在client端執行，所以下載後像這樣引入就可以了。
這是你編輯的less樣式
<link rel="stylesheet/less" type="text/css" href="styles.less">
這是less.js檔案
<script src="less.js" type="text/javascript"></script>

設定完成後，就可以來玩看看less了。
可以使用變數

view plain copy to clipboard print ?

@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}

Compile後

view plain copy to clipboard print ?

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

jQuery 取得多選的排序

紅色死神發表於 2012年7月30日星期一 7月 30, 2012 / 沒有留言
標籤 javascript, jquery

最近要用到的，在選擇的圖片上標示目前的順序，當取消選取一張照片時，照片的排序編號也要重新排過，稍微研究一下就玩出來了。

首先準備這樣的html，click_ord的class是用來塞數字的。
<div class="album_img"><img src="img"><div class="click_ord"></div></div>

然後在js裡，當點擊圖片時，顯示點擊的順序，每點一張變數就+1

view plain copy to clipboard print ?

//照片張數
$photoNum=0;
++$photoNum;
$(this).find(".click_ord").text($photoNum).show();

FF20

紅色死神發表於 7月 30, 2012 / 沒有留言
標籤 cosplay

天氣超好，只是太晚去，所以拍的不多。

復仇者聯盟

紅色死神發表於 7月 30, 2012 / 沒有留言
標籤 Marvel Comics, movie, Super Heroes

Marvel從鋼鐵人第一集後，就啟動的復仇者聯盟計畫，在經歷了鋼鐵人1、2，無敵浩克，美國隊長1跟雷神索爾後，終於在今年把他們集結起來，而這部也是我非常期待的電影。

進了電影院絕對不會讓人失望，把那麼多超級英雄集合在一起，而且還可以分配到每個人的戲分跟重要性都差不多，足見導演的功力，負責引怪的鋼鐵人，浩克跟索爾負責開無雙，鷹眼的神射在劇中讓人眼睛一亮，而黑寡婦雖然最沒有力量，但也負責了終結劇中敵人不斷入侵的重要任務，反觀TR3那個女主角一句話讓麥卡登變腦殘，就知道即使是爽片，劇情也不能太糟糕阿..

蜘蛛人-驚奇再起

紅色死神發表於 7月 30, 2012 / 沒有留言
標籤 Marvel Comics, movie, Super Heroes

因為marvel說如果幾年內沒有拍新電影，版權就會收回去的spider-man，在導演跟主角都宣佈不再繼續的情況下，sony就只好重開機了，雖然看之前覺得主角太帥，覺得這重開機的時間也太短，但我還是去看了，而且我想說的是他還是值得去看的超級英雄電影。

重開機時間回到Peter還是高中的時候，女主角也回到他的第一任女朋友關史黛西，比起之前三部曲的瑪莉珍，關還可以在戰鬥中幫助Peter，表現的有智慧多了，導演的手法也讓會讓人很喜歡他們兩個之間那種兩小無猜的感情，然後實在是新版的Peter太帥，也不用像舊版的Peter一樣總是在生活跟感情上吃鱉，果然長相不同劇情上也要有不同(誤)。

Diablo III 秘術師普通級突破

紅色死神發表於 2012年7月27日星期五 7月 27, 2012 / 沒有留言
標籤 Diablo

秘術師也突破普通級了。

jQuery 偵測手機是橫向或縱向

紅色死神發表於 2012年7月26日星期四 7月 26, 2012 / 沒有留言
標籤 javascript, jquery

基本上是一個寫mobile web會很常用到的東西。

view plain copy to clipboard print ?

var checkOrientation = function(){
mode = Math.abs(window.orientation) == 90 ? 'landscape' : 'portrait';
// 在 Android 上使用 Opera Mobile 測試, 發現要另外這樣判斷
if ( $.browser.opera )
{
width = screen.width;
height = screen.height;
mode = width > height ? "landscape" : "portrait";
}
// 本例為希望在使用者用橫向瀏覽時，就秀出遮罩或警示訊息
if (mode == 'landscape')
{
// 警語遮罩顯示
$("#mask").show();
} else {
// 警語遮罩關閉
$("#mask").hide();
}
};
window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);
setInterval(checkOrientation, 500);

來源: [JavaScript] 判斷手機為直向或橫向
參考: Detect rotation of Android phone in the browser with javascript

製作網頁畫面捲動不同步效果

紅色死神發表於 2012年7月25日星期三 7月 25, 2012 / 沒有留言
標籤 css, javascript, jquery

點上圖可以看效果。

最近國外網站流行這種，當我們滾動捲軸時，背景的圖片不同步捲動的效果，稍微思考一下，其實也不會很難做，剛好看到有篇文章介紹，就自己也實作一個，其實也是最近剛好有需要用到。

簡單的說我們需要幾個div，讓他的position設為fixed，到時在根據捲動scrollbar距離去改變每個div的top的高度就可以了。