今天寫了分頁面中的基本信息
別看內(nèi)容沒多少辛慰，但是寫css的時候可花了不少的時間×ぃ現(xiàn)在發(fā)現(xiàn)div真是個好東西杜窄，基本上頁面上的內(nèi)容都是他完成的〕膊簦現(xiàn)在對text-align:center理解又加深了利朵，這句代碼說把當(dāng)前元素的內(nèi)容，以當(dāng)前元素的寬度水平居中屁使。vertical-align;top垂直居頂，和上面對齊奔则。
6.2日 20:05更新產(chǎn)品詳情
寫這個頁面時蛮寂，學(xué)到了新知識點。偽元素簡單的說就是在html里沒有這個元素易茬，是通過
css插進(jìn)去的元素酬蹋，html里沒有這個元素。
用到了:before 和:after兩個為元素抽莱。他們的作用分別是在當(dāng)前元素前加入內(nèi)容和當(dāng)前元素后加入內(nèi)容除嘹，加入內(nèi)容也就間接生成了元素。在css中必須寫上content: 岸蜗，指的是加入的內(nèi)容尉咕，如果你不想加入內(nèi)容，只想生成元素的話璃岳。就content: "" 這樣內(nèi)容就為空年缎。
6.4日更新 交互
點擊下面圖片，上面就會出現(xiàn)對應(yīng)的大圖片铃慷。這就用到了預(yù)加載单芜，在html中，這五張小圖片后還有一個div ,不過這個div是隱藏的犁柜。在jquery中洲鸠，在當(dāng)鼠標(biāo)經(jīng)過小圖片時，取小圖片的URL值馋缅，不取src值是因為小圖片加載快扒腕，而使用大圖片只是修改下尺寸的話，相當(dāng)于有五張大圖片萤悴，這樣加載就沒有五張小圖片加載的快了瘾腰。
把上面圖片src值修改成當(dāng)前小圖片的URL值。在當(dāng)大圖片加載完時覆履，調(diào)用load()函數(shù)蹋盆，在使用each()函數(shù)遍歷五張小圖片元素，然后使用attr()獲取當(dāng)前小圖片的URL值硝全，在創(chuàng)造一個圖片類栖雾，再把圖片類的src設(shè)置成獲取到的URL值。再把圖片類調(diào)用onload事件伟众，這個事件的意思是當(dāng)頁面加載完成時析藕，觸發(fā)這個事件，再把圖片加到隱藏的div中赂鲤。
這樣沒點擊一個小圖片時噪径，隱藏的div就會增加五個大圖片。很顯然数初，應(yīng)該還可以改改找爱。先設(shè)置一個變量為false，在觸發(fā)load()事件時泡孩，增加個一個判斷车摄，當(dāng)變量為真時，退出余下代碼仑鸥。在圖片增加到div后吮播，把變量設(shè)置為真。這樣眼俊，點擊小圖片div就不會增加圖片了意狠。jquery代碼如下
<script>
$(function(){
var he = false;
$("img.smallImage").mouseenter(function(){
var bigImgURL = $(this).attr("bigImgURL");
$("img.bigImg").attr("src", bigImgURL);
});
$("img.bigImg").load(function(){
if (he)
return;
$("img.smallImage").each(function(){
var bigImgURL = $(this).attr("bigImgURL");
var img = new Image();
img.src = bigImgURL;
img.onload = function(){
$("div.money").append($(img));
};
});
he = true;
});
});
</script>
當(dāng)點擊上下安按鈕時，輸入框數(shù)字隨之增加減少疮胖。輸入不能大于庫存如果大于庫存就等于庫存环戈，也不能小于庫存，小于就等于一澎灸。庫存是要在服務(wù)器取的院塞，這就涉及了后端。現(xiàn)不能實現(xiàn)性昭，所以就設(shè)置了一個變量代替庫存拦止。首先判讀輸入框的值不能為非數(shù)字和小于0.如果是就等于1.
在點擊向上或向下箭頭時就增加或減少。如果大于庫存或小于0糜颠，就等于庫存貨1.jquery代碼如下汹族。
<script>
var stack = 66;
var num = 0;
$(function(){
$("input.inputText").keyup(function(){
var text = $(this).val();
num = parseInt(text);
if (isNaN(num))
num = 1;
if (num > stack)
num = stack;
$("input.inputText").val(num);
});
$("a.shang").click(function(){
num++;
if (num > stack)
num = stack;
$("input.inputText").val(num);
});
$("a.xia").click(function(){
num--;
if (num < 1)
num = 1;;
$("input.inputText").val(num);
});
});
</script>
當(dāng)鼠標(biāo)點擊商品詳情或累計評價時，會顯示對應(yīng)的頁面其兴。設(shè)置詳情和評價大小一樣鞠抑，內(nèi)外邊距也一樣。在jquery中，先把評價頁面隱藏砌烁，在當(dāng)鼠標(biāo)點擊評價時矫限，把詳情隱藏 評價顯示。當(dāng)鼠標(biāo)點擊詳情時箕速，則相反。jquery代碼如下朋譬。
<script>
$(function(){
$("div.parentDiv1").hide();
$("a.evaluation").click(function(){
$("div.parentDiv").hide();
$("div.parentDiv1").show();
});
$("a.productReviewTopPartSelectedLink").click(function(){
$("div.parentDiv").show();
$("div.parentDiv1").hide();
});
});
</script>
