開始產品頁面的學習。項目里面有900多種商品，但是每種商品的布局是一致的：1.產品圖片 2.基本信息 3.產品詳情 4.累計評價 5.交互。從第一個產品圖片開始吧！
一、產品圖片
產品圖片用到了分類頁面中學到的一個技術，就是鼠標懸停在某個圖片上的時候，這個圖片的邊框會加粗，這是利用了加一層框架的技術，即在圖片外面再加上一層div，這個div平時的時候邊框的顏色就是背景顏色（白色），當鼠標懸停在圖片上時，讓這個外層div的邊框顯示為不同的顏色就行了。
自己編寫玩HTML，再加上CSS樣式后，產品圖片效果如下：
大圖片下面的4個小圖片，可以看出來沒有完全居中，我自己不知道怎么完全居中。看了站長的代碼，效果雖然是居中的，可是也並不是完全居中，讓我想了半天。原來大圖片是400px寬，小圖片是60px寬，5個小圖片的div獲取全局div寬度的80%，400*0.8=320，和5個小圖片總寬度300px很接近，所以感覺是居中的。。。。
二、基本信息頁面
步驟一中的產品圖片固定寬度，右側基本信息自動填滿
純html頁面效果：
試着自己加CSS樣式：
有兩處地方沒有做好：一個是價格處的背景顏色，還有一個是購買數量的調節按鈕不會做，來看一下站長是怎么做的。原來都是已經做好的圖片。。。
三、產品詳情
純html頁面：
自己開始加CSS樣式：
站長的商品詳情做的很精致，上面有一個邊框和一個美人尖：
站長是這么做的：商品詳情鏈接添加一個類屬性，值為selected，然后CSS代碼是這么寫的：
1 a.selected:before{ /*這個：before 是說在a.selected前面的意思*/ 2 content: ""; 3 display: block; 4 border-width: 1px; 5 border-color: #b00000; 6 border-style: solid; 7 width : 90px; 8 height: 0px; 9 position: absolute; 10 top: -1px; 11 margin-left: -1px; 12 } 13 a.selected:after{ 14 content: ""; 15 display: block; 16 border-color: #b00000 transparent transparent; 17 border-style: solid; 18 border-width: 5px; 19 width: 0px; 20 height: 0px; 21 position: absolute; 22 top: -1px; 23 left: 50%; 24 margin-left: -5px; 25 }
四、累計評價
純html的效果
嘗試自己加上CSS樣式，這次還有一個美人尖，看看自己能不能搞定？哈哈，(╥╯^╰╥)，難啊
五、交互內容
這次的交互內容只有3個，很容易的。一個是點擊產品圖片中的小圖片，會以大圖片顯示；第二個是點擊上調或者下調按鈕進行購買數量的選擇；第三個是商品詳情和評價的切換。怎么樣？還是很簡單的，開始第一個交互內容吧！
5.·1 交互內容1——大小圖片的切換顯示
自己的思路（無論對錯）：當鼠標進入某一個小圖片，觸發了事件，讓這個小圖片的大版本顯示在固定位置；鼠標離開，啥也不做
貼一下站長的代碼：
1 $("img.smallImage").mouseenter(function(){ /*通過$()獲取類名是smallImage的小圖片元素，觸發鼠標進入事件*/ 2 var bigImageURL = $(this).attr("bigImageURL"); /*獲取小圖片對應的大圖片的url*/ 3 $("img.bigImg").attr("src",bigImageURL); /*通過attr()函數修改大圖片的src屬性，真是巧妙啊！這樣也不用像我的思路那樣去獲取位置信息了，簡簡單單的修改一下src屬性就搞定了*/ 4 }); 5
6 $("img.bigImg").load( /*這個函數其實沒有也可以。但是這個函數是做什么用的呢？當大圖片在加載的過程中，那每次打開頁面就會加載這個大圖片，觸發事件*/ 7 function(){ 8 $("img.smallImage").each(function(){ /*遍歷所有類名是smallImage的img，通過attr()函數獲取自定義屬性bigImageURL，即對應的大圖片*/ 9 var bigImageURL = $(this).attr("bigImageURL"); 10 img = new Image(); /*new一個圖像對象img*/ 11 img.src = bigImageURL; /*給對象img的屬性src賦值，值就是大圖片的url*/ 12
13 img.onload = function(){ /*onload時間就是頁面或圖片加載完成后就執行后面的內容*/ 14 console.log(bigImageURL); /*把url打印到控制台*/ 15 $("div.img4load").append($(img)); /*把img添加到img4load這個div中，這個div添加了hide類，所以圖片不會顯示*/ 16 }; 17 }); 18 } 19 );
5.2購買數量增加、刪除功能
自己的思路：鼠標點擊事件，每當鼠標點一次增加或者刪除按鈕，input中的值就+1或者-1
好，來看下站長的代碼：
1 <script>
2
3 $(function(){ 4 var stock = 66; /*表示最大庫存*/ 5 $(".productNumberSetting").keyup(function(){ /*input框，發生鍵盤彈起事件*/ 6 var num= $(".productNumberSetting").val(); 7 num = parseInt(num); 8 if(isNaN(num)) 9 num= 1; 10 if(num<=0) 11 num = 1; 12 if(num>stock) 13 num = stock; 14 $(".productNumberSetting").val(num); 15 }); 16
17 $(".increaseNumber").click(function(){ /*鼠標單擊*/ 18 var num= $(".productNumberSetting").val(); 19 num++; 20 if(num>stock) 21 num = stock; 22 $(".productNumberSetting").val(num); 23 }); 24 $(".decreaseNumber").click(function(){ 25 var num= $(".productNumberSetting").val(); 26 --num; 27 if(num<=0) 28 num=1; 29 $(".productNumberSetting").val(num); 30 }); 31
32 }); 33
34 </script>
5.3 切換產品詳情和評價頁面
自己的思路：發生鼠標單擊事件，當點擊“詳情”字樣時，讓詳情頁面的z-index=1，評價頁面的z-index=0；當點擊“評價”頁面時，就反過來。
站長的代碼：
1 <script>
2 $(function(){ 3 $("div.productReviewDiv").hide(); /*默認評價隱藏*/ 4 $("a.productDetailTopReviewLink").click(function(){ /*點擊評價按鈕時，顯示評價div，隱藏詳情div*/ 5 $("div.productReviewDiv").show(); 6 $("div.productDetailDiv").hide(); 7 }); 8 $("a.productReviewTopPartSelectedLink").click(function(){ /*點擊詳情按鈕時，顯示詳情div，隱藏評價div*/ 9 $("div.productReviewDiv").hide(); 10 $("div.productDetailDiv").show(); 11 }); 12 }) 13 </script>
總結：
1.美人尖的做法：首先在上面畫一條橫線，然后在橫線的中間畫一個小尖尖。橫線和小尖尖的做法分別是：a.selected : before和a.selected : after{content: ""; display: block; border-width、border-color、border-style、width、height、position、left、top}設置好
2.通過js創建Image對象的過程，瀏覽器會把圖片從服務器加載到本地。當鼠標懸停，瀏覽器再次發出對大圖片訪問請求的時候，服務器已經給過了，就會返回304，瀏覽器一看是304，就會使用剛才從服務器獲取的大圖片了。
3.自己的思路不是太笨就是太花里胡哨沒啥用，還是站長的思路好，比如說5.3的思路，之前做好了的詳情頁面和評價頁面放在一起，先默認隱藏評價頁面，然后再通過按鈕來選擇就好了。而我的z-index思路，看似好，其實變得更復雜了，因為還要去加絕對定位。