How2j仿写天猫前端学习笔记四产品页面

今天写了分页面中的基本信息

基本信息

别看内容没多少，但是写css的时候可花了不少的时间。现在发现div真是个好东西，基本上页面上的内容都是他完成的。现在对text-align:center理解又加深了，这句代码说把当前元素的内容，以当前元素的宽度水平居中。vertical-align;top垂直居顶，和上面对齐。

---

6.2日 20:05更新产品详情

产品详情

写这个页面时，学到了新知识点。伪元素简单的说就是在html里没有这个元素，是通过
css插进去的元素，html里没有这个元素。

用到了:before 和:after两个为元素。他们的作用分别是在当前元素前加入内容和当前元素后加入内容，加入内容也就间接生成了元素。在css中必须写上content: ，指的是加入的内容，如果你不想加入内容，只想生成元素的话。就content: "" 这样内容就为空。

---

6.4日更新 交互

图片交互

点击下面图片，上面就会出现对应的大图片。这就用到了预加载，在html中，这五张小图片后还有一个div ,不过这个div是隐藏的。在jquery中，在当鼠标经过小图片时，取小图片的URL值，不取src值是因为小图片加载快，而使用大图片只是修改下尺寸的话，相当于有五张大图片，这样加载就没有五张小图片加载的快了。

把上面图片src值修改成当前小图片的URL值。在当大图片加载完时，调用load()函数，在使用each()函数遍历五张小图片元素，然后使用attr()获取当前小图片的URL值，在创造一个图片类，再把图片类的src设置成获取到的URL值。再把图片类调用onload事件，这个事件的意思是当页面加载完成时，触发这个事件，再把图片加到隐藏的div中。

这样没点击一个小图片时，隐藏的div就会增加五个大图片。很显然，应该还可以改改。先设置一个变量为false，在触发load()事件时，增加个一个判断，当变量为真时，退出余下代码。在图片增加到div后，把变量设置为真。这样，点击小图片div就不会增加图片了。jquery代码如下

---

输入框

当点击上下安按钮时，输入框数字随之增加减少。输入不能大于库存如果大于库存就等于库存，也不能小于库存，小于就等于一。库存是要在服务器取的，这就涉及了后端。现不能实现，所以就设置了一个变量代替库存。首先判读输入框的值不能为非数字和小于0.如果是就等于1.

在点击向上或向下箭头时就增加或减少。如果大于库存或小于0，就等于库存货1.jquery代码如下。

---

商品介绍及评价

当鼠标点击商品详情或累计评价时，会显示对应的页面。设置详情和评价大小一样，内外边距也一样。在jquery中，先把评价页面隐藏，在当鼠标点击评价时，把详情隐藏 评价显示。当鼠标点击详情时，则相反。jquery代码如下。