今天寫(xiě)了分頁(yè)面中的基本信息
別看內(nèi)容沒(méi)多少，但是寫(xiě)css的時(shí)候可花了不少的時(shí)間?，F(xiàn)在發(fā)現(xiàn)div真是個(gè)好東西，基本上頁(yè)面上的內(nèi)容都是他完成的。現(xiàn)在對(duì)text-align:center理解又加深了，這句代碼說(shuō)把當(dāng)前元素的內(nèi)容，以當(dāng)前元素的寬度水平居中。vertical-align;top垂直居頂，和上面對(duì)齊。
6.2日 20:05更新產(chǎn)品詳情
寫(xiě)這個(gè)頁(yè)面時(shí)，學(xué)到了新知識(shí)點(diǎn)。偽元素簡(jiǎn)單的說(shuō)就是在html里沒(méi)有這個(gè)元素，是通過(guò)
css插進(jìn)去的元素，html里沒(méi)有這個(gè)元素。
用到了:before 和:after兩個(gè)為元素。他們的作用分別是在當(dāng)前元素前加入內(nèi)容和當(dāng)前元素后加入內(nèi)容，加入內(nèi)容也就間接生成了元素。在css中必須寫(xiě)上content: ，指的是加入的內(nèi)容，如果你不想加入內(nèi)容，只想生成元素的話。就content: "" 這樣內(nèi)容就為空。
6.4日更新 交互
點(diǎn)擊下面圖片，上面就會(huì)出現(xiàn)對(duì)應(yīng)的大圖片。這就用到了預(yù)加載，在html中，這五張小圖片后還有一個(gè)div ,不過(guò)這個(gè)div是隱藏的。在jquery中，在當(dāng)鼠標(biāo)經(jīng)過(guò)小圖片時(shí)，取小圖片的URL值，不取src值是因?yàn)樾D片加載快，而使用大圖片只是修改下尺寸的話，相當(dāng)于有五張大圖片，這樣加載就沒(méi)有五張小圖片加載的快了。
把上面圖片src值修改成當(dāng)前小圖片的URL值。在當(dāng)大圖片加載完時(shí)，調(diào)用load()函數(shù)，在使用each()函數(shù)遍歷五張小圖片元素，然后使用attr()獲取當(dāng)前小圖片的URL值，在創(chuàng)造一個(gè)圖片類，再把圖片類的src設(shè)置成獲取到的URL值。再把圖片類調(diào)用onload事件，這個(gè)事件的意思是當(dāng)頁(yè)面加載完成時(shí)，觸發(fā)這個(gè)事件，再把圖片加到隱藏的div中。
這樣沒(méi)點(diǎn)擊一個(gè)小圖片時(shí)，隱藏的div就會(huì)增加五個(gè)大圖片。很顯然，應(yīng)該還可以改改。先設(shè)置一個(gè)變量為false，在觸發(fā)load()事件時(shí)，增加個(gè)一個(gè)判斷，當(dāng)變量為真時(shí)，退出余下代碼。在圖片增加到div后，把變量設(shè)置為真。這樣，點(diǎn)擊小圖片div就不會(huì)增加圖片了。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)點(diǎn)擊上下安按鈕時(shí)，輸入框數(shù)字隨之增加減少。輸入不能大于庫(kù)存如果大于庫(kù)存就等于庫(kù)存，也不能小于庫(kù)存，小于就等于一。庫(kù)存是要在服務(wù)器取的，這就涉及了后端。現(xiàn)不能實(shí)現(xiàn)，所以就設(shè)置了一個(gè)變量代替庫(kù)存。首先判讀輸入框的值不能為非數(shù)字和小于0.如果是就等于1.
在點(diǎn)擊向上或向下箭頭時(shí)就增加或減少。如果大于庫(kù)存或小于0，就等于庫(kù)存貨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)點(diǎn)擊商品詳情或累計(jì)評(píng)價(jià)時(shí)，會(huì)顯示對(duì)應(yīng)的頁(yè)面。設(shè)置詳情和評(píng)價(jià)大小一樣，內(nèi)外邊距也一樣。在jquery中，先把評(píng)價(jià)頁(yè)面隱藏，在當(dāng)鼠標(biāo)點(diǎn)擊評(píng)價(jià)時(shí)，把詳情隱藏 評(píng)價(jià)顯示。當(dāng)鼠標(biāo)點(diǎn)擊詳情時(shí)，則相反。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>
