終於跟著老師的腳步完成了初步的海報畫廊。。。感覺程式碼不難 就是邏輯好繞。。。有時候真覺得混亂 腦袋裡亂七八糟的東西攪在一起 程式碼這有一點問題 那有一點問題。。。還是基本功不紮實。。。經過幾天折騰 在老師思路領導下 總算是完成了。。。以後還要好好完善完善。。。下面記錄一些程式碼中css和js的重點

CSS

1.perspective屬性

perspective 是 CSS3 屬性，目前瀏覽器都不支援 perspective 屬性，Chrome 和 Safari 支援替代的 -webkit-perspective 屬性。perspective 屬性定義 3D 元素距檢視的距離，以畫素計，其值越小，使用者與3D空間Z平面距離越近，視覺效果更令人印象深刻；反之，值越大，使用者與3D空間Z平面距離越遠，視覺效果就很小，當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身，perspective 屬性隻影響 3D 轉換元素與 perspective-origin 屬性一同使用該屬性，這樣您就能夠改變 3D 元素的底部位置

perspective: number | none; 
number：元素距離檢視的距離，以畫素計(px 可以不寫)
none：預設值，與 0 相同，不設定透視

在3D變形中，除了perspective屬性可以啟用一個3D空間之外，在3D變形的函式中的perspective()也可以啟用3D空間。他們不同的地方是：perspective用在舞臺元素上（變形元素們的共同父元素）；perspective()就是用在當前變形元素上，並且可以與其他的transform函式一起使用。例如，我們可以把：..stage {perspective: 600px;} 寫成 .stage .box {transform: perspective(600px);}  perspective()函式取值只能大於0，如果取值為0或比0小的值，將無法啟用3D空間

具體圖例可以看http://www.jscode.cn/web/v74937

2.transition屬性

IE 10、Firefox、Opera 和 Chrome 支援 transition 屬性，Safari 支援替代的 -webkit-transition 屬性 Internet Explorer 9 以及更早版本的瀏覽器不支援 transition 屬性

transition 屬性是一個簡寫屬性(預設值：all 0 ease 0)，用於設定四個過渡屬性：
transition-property，定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔；all 則所有屬性都將獲得過渡效果
transition-duration，規定完成過渡效果需要多少秒或毫秒，必須始終設定 transition-duration 屬性，否則時長為 0，就不會產生過渡效果
transition-timing-function，規定速度效果的速度曲線(linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n))
transition-delay，定義過渡效果何時開始

具體圖例可以看http://www.cnblogs.com/cocowool/archive/2012/07/23/2605600.html

3.backface-visibility 屬性

IE 10+ 和 Firefox 支援 backface-visibility 屬性，Opera 15+、Safari 和 Chrome 支援替代的 -webkit-backface-visibility 屬性

backface-visibility 屬性定義當元素不面向螢幕時是否可見
backface-visibility: visible | hidden
visible：背面是可見的
hidden：背面是不可見的

具體圖例可以看http://www.w3school.com.cn/cssref/pr_backface-visibility.asp

4.transform屬性

IE 10、Firefox、Opera 支援 transform 屬性，IE 9 支援替代的 -ms-transform 屬性（僅適用於 2D 轉換）Safari 和 Chrome 支援替代的 -webkit-transform 屬性（3D 和 2D 轉換），Opera 只支援 2D 轉換

transform: none | rotate | scale | skew | translate | matrix

如果有多個變換函式的時候，以空格分開
none: 表示不進行變換
rotate：旋轉。rotate(<angle>) ：通過指定的角度引數對原元素指定一個 2D rotation，需先有 transform-origin 屬性的定義
scale：縮放。元素的縮放中心點是元素的中心位置，縮放基數為1，如果其值大於1元素就放大，反之其值小於1，元素縮小；
scale(x,y)使元素水平方向和垂直方向同時縮放；如果第二個引數未提供，則取與第一個引數一樣的值；
scaleX(x)元素僅水平方向縮放；scaleY(y)元素僅垂直方向縮放；其中 x, y 為數字
skew：扭曲。預設以元素中心為基點，也可以通過transform-origin來改變元素的基點位置；
skew(x,y)使元素在水平和垂直方向同時扭曲，如果沒有設定第二個引數，那麼Y軸為0deg；
skewX(x)僅使元素在水平方向扭曲變形；skewY(y)僅使元素在垂直方向扭曲變形，其中 x, y 為角度
translate：移動。移動物體時基點預設為元素中心點，也可以根據 transform-origin 進行改變基點；
translate(x,y)水平方向和垂直方向同時移動，如果第二個引數未提供，則以 0 作為其值；
translateX(x)僅水平方向移動；translateY(y)僅垂直方向移動；其中 x, y 為畫素值
matrix：矩陣。

transform-origin: x-axis y-axis z-axis; 設定旋轉元素的基點位置

x-axis：定義檢視被置於 X 軸的何處。可能的值：left | center | right | length | %

y-axis：定義檢視被置於 Y 軸的何處。可能的值：top | center | bottom | length | %

z-axis：定義檢視被置於 Z 軸的何處。可能的值：length

具體圖例參考：http://www.w3cplus.com/content/css3-transform/

5.transform-style:preserve-3d

IE不支援，Firefox 支援 transform-style 屬性，Chrome、Safari 和 Opera 支援替代的 -webkit-transform-style 屬性
transform-style 屬性規定如何在 3D 空間中呈現被巢狀的元素。
transform-style: flat | preserve-3d
flat: 子元素將不保留其 3D 位置
preserve-3d: 子元素將保留其 3D 位置
一般而言，該宣告應用在3D變換的兄弟元素們的父元素上，也就是舞臺元素
更多參考：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

javascript

1.訪問物件屬性

photo.style['transform'] = photo.style['-webkit-transform'] = 'rotate(' + random([-150, 150]) + 'deg) scale(0.8)';相當於photo.style.transform='rotate(' + random([-150, 150]) + 'deg) scale(1)';

function g(selector){
       var method=selector.substr(0,1)=='.'?'getElementsByClassName':'getElementById';
return document[method](selector.substr(1));
}

一般來說，訪問物件屬性時使用的都是點表示法，不過，在 JavaScript 中也可以使用方括號表示法來訪問物件的屬性。在使用方括號語法時，應該將要訪問的屬性以字串的形式放在方括號中，如下面的例子所示:
                        alert(person["name"]); //"Nicholas"
                        alert(person.name); //"Nicholas"
方括號語法的主要優點是可以通過變數來訪問屬性，如果屬性名中包含會導致語法錯誤的字元，或者屬性名使用的是關鍵字或保留字，也可以使用方括號表示法。例如：
                        person["first name"] = "Nicholas";
通常，除非必須使用變數來訪問屬性，否則建議使用點表示法。

2.split和join方法

var n=elem.id.split('_')[1]             （id是photo_n 字串變為陣列 取到n）

html.push('<div class="nav">'+nav.join('')+'</div>');  （陣列化為字串 預設為逗號連線 所以要加引號表示不用逗號）

我之前文章有詳細說 http://blog.csdn.net/heyue_99/article/details/52076946

3.test()方法

if(/photo_front/.test(cls)){                       //cls中是否存在photo_front
cls=cls.replace(/photo_front/,'photo_back');    //不能直接傳值 會覆蓋原有的className 要替換
//將按鈕圖示的樣式也改變
g('#nav_'+n).className+=' i_back ';  //同時處理控制按鈕
}

test() 方法用於檢測一個字串是否匹配某個模式.

詳見 http://www.w3school.com.cn/jsref/jsref_test_regexp.asp

4.replace()方法

replace方法是屬於String物件的，可用於替換字串。

var oHtml=temp.replace('{index}',s)

                         .replace('{image}',data[s].src)

                         .replace('{caption}',data[s].caption)

                         .replace('{desc}',data[s].desc);

cls=cls.replace(/photo_front/,'photo_back'); 

StringObject.replace(searchValue,replaceValue)

StringObject: 字串

searchValue：字串或正則表示式

replaceValue: 字串或者函式

replace()方法可連續使用

詳見http://blog.jobbole.com/50906/

5.substr()方法

substr() 方法可在字串中抽取從 start 下標開始的指定數目的字元。不會改變原字串。

function g(selector){
var method=selector.substr(0,1)=='.'?'getElementsByClassName':'getElementById';
return document[method](selector.substr(1));
}

又如

str='happy day'     //"happy day"
str.substr(2,2)       //"pp"
str                         //"happy day"

詳見 http://www.w3school.com.cn/jsref/jsref_substr.asp

6.splice()方法

splice() 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。

註釋：該方法會改變原始陣列,返回刪除的資料

photo_left=photo.splice(0,Math.ceil(photo.length/2));

又如

arr=[1,2,3,4,5,6]   //[1, 2, 3, 4, 5, 6]
arr.splice(1,2)       //[2, 3]   
arr                         //[1, 4, 5, 6]

詳見 http://www.w3school.com.cn/jsref/jsref_splice.asp