how2j网站前端项目——天猫前端（第一次）学习笔记2

今天早上开始首页内容。首页除了公共页面，还有许多自己的内容：导航和轮播、分类菜单、推荐产品展示，最后还有js的互动。

一、导航和轮播的学习

　　在自己做图片的轮播时，还是没有一次成功。存在了好几处问题：

问题1：在最外层的div中id没有写对，data-ride没有写对	最外层div中的id应该只写成carousel-of-product，自己多加了一个carousel	还有把data-ride写反了，写成了ride-data
问题2：在ol层中的li中，data-target没有写对	在class="carousel-indicators"的ol层，里面的li一个属性data-target，我写成了target-data，也是把属性记错
问题3：在class="carousel-inner"的第二层div中，少写了role属性	<div class="carousel-inner">中少写了role="listbox"属性
问题4：在<div class="item">层中少写了一个属性值	<img src="xxx" class="carouselImage">中，class属性少写了值carousel，img应该这样写：<img src="xxx" class="carousel  carouselImage />

修改好以后，纯Html效果如下（虽然说是纯html，但是已经用到了bootstrap框架）

自己尝试着加上CSS样式：

二、分类菜单的学习

纯html页面：

尝试自己加CSS样式：

光看样式觉得还可以，但是这个右边的详细分类其实是应该要隐藏的，how2j站长为了显示效果才这样设计的，后面还要再加上功能。这个分类菜单分左右两部分，两边都是采用绝对定位的形式，而且z-index应该要设计为1，分类菜单才可以覆盖轮播。

 

三、推荐产品展示

上一次就是学到这里，心情开始烦躁起来，这次要好好学习！：）

自己写的简单html，效果如下：

尝试自己加上CSS，效果如下：

现在觉得学习的时候，不要想太多，不然会觉得压力很大，很难学的感觉，这样容易产生放弃的想法，简单一点就好：）

cursor鼠标样式，cursor: pointer就是鼠标样式是手指头的

 

四、JS交互内容

首页的互动效果主要是猫耳朵的出现，以及在轮播部分显示和隐藏产品列表。猫耳朵是指在导航栏上鼠标悬停在某个链接上，上面会出现一个红色的猫耳朵；显示和隐藏产品列表是指在分类菜单中选择某个分类时会弹出更加详细的分类。老实说，我不会这个。我先看看站长怎么做的。

1.站长先设置猫耳朵图片的display属性为none，将猫耳朵隐藏

2.然后通过一段<script>代码，把程序添加：

$(function(){
    $("div.rightMenu span").mouseenter(function(){ /*当鼠标进入span，mouseenter不区分子元素，就是就算进入了span的子元素，也算是在span里面，不管子元素这个说法*/
        var left = $(this).position().left; /*获取当前元素的x坐标*/
        var top = $(this).position().top; /*获取当前元素的y坐标*/
        var width = $(this).css("width"); /*获取当前元素的宽度*/
        var destLeft = parseInt(left) + parseInt(width)/2; /*定义猫耳朵的x坐标*/
        $("img#catear").css("left",destLeft); /*通过$()获取元素后，再通过css()直接设置样式*/
        $("img#catear").css("top",top-20);
        $("img#catear").fadeIn(500); /*延时500毫秒，淡入*/
    });
    $("div.rightMenu span").mouseleave(function(){ /*当鼠标离开span元素，隐藏猫耳朵*/
        $("img#catear").hide();
    });
});

显示和隐藏产品列表的JS代码，也是使用JQuery库，用起来比原生JavaScript代码简洁很多：

 1 <script> //直接插入<script>中，简单有效
 2 function showProductsAsideCategorys(cid){
 3     $("div.eachCategory[cid="+cid+"]").css("background-color","white"); //$()获取对应cid的eachCategory的div元素，$()里面的选择器很巧妙，是三个字符串拼接的："xxx" + cid + "xxx"
 4     $("div.eachCategory[cid="+cid+"] a").css("color","#87CEFA"); //$()获取对应cid的粗分类，设置背景颜色和字体颜色
 5     $("div.productsAsideCategorys[cid="+cid+"]").show(); //$()获取对应cid的详细分类，并显示出来
 6 }
 7  
 8 function hideProductsAsideCategorys(cid){ //隐藏函数，让粗分类的背景颜色和字体颜色还原，并隐藏详细分类类容。真的是太巧妙了，站长厉害！
 9     $("div.eachCategory[cid="+cid+"]").css("background-color","#e2e2e3");
10     $("div.eachCategory[cid="+cid+"] a").css("color","#000");
11     $("div.productsAsideCategorys[cid="+cid+"]").hide();
12 }
13  
14 $(function(){ //文档对象模型加载完毕后再执行这些内容，简洁有力
15     $("div.eachCategory").mouseenter(function(){ //当鼠标进入任意一个产品分类上
16         var cid = $(this).attr("cid"); //获取这个产品分类的自定义属性cid，即分类主键
17         showProductsAsideCategorys(cid); //根据cid，显示不同的详细分类内容
18     });
19     $("div.eachCategory").mouseleave(function(){
20         var cid = $(this).attr("cid");
21         hideProductsAsideCategorys(cid);
22     });
23     $("div.productsAsideCategorys").mouseenter(function(){
24         var cid = $(this).attr("cid");
25         showProductsAsideCategorys(cid);
26     });
27     $("div.productsAsideCategorys").mouseleave(function(){
28         var cid = $(this).attr("cid");
29         hideProductsAsideCategorys(cid);
30     });
31 });
32 </script>

 

转载于:https://www.cnblogs.com/czp2bconfident/p/8638053.html