关于网页设计中购物车hover与table切换实现方法的一点点说明

在刚接触网页设计时，这两个问题往往是一大难点。下面笔者就先从hover效果的实现开讲。

先打出网页内容

<div id="box">     <div class="shopcar">     购物车     </div>     <div class="hidden">     您的购物车没有商品,请尽快选购!!!     </div></div>

再添加样式

<style>      *{margin:0;        padding:0;        list-style:none;      }      #box{           width:200px;           margin:0 auto;           margin-top:100px;           position:relative;      }      #box .shopcar{                    width:200px;                    height:40px;                    border:1px solid red;                    border-bottom:none;                    background:blue;                    position:relative;                    z-index:1;                    font-size:16px;                    line-height:40px;                    text-align:center;                    color:red;       }      #box .hidden{                   width:360px;                   height:160px;                   border:1px solid red;                   display:none;                   position:absolute;                   top:40px;                   font-size:16px;                   line-height:160px;                   text-align:center;       }       #box:hover .hidden{                          display:block;                          background:white;                          color:green;       }       #box:hover .shopcar{                           color:orange;                           background:white;       }</style>

代码功能分析：
首先设一个大盒子的ID为box,里面加入两个盒子,分别设CLASS为shopcar与hidden。
将box宽度设为200px,并居中,让它相对定位.设置购物车盒子宽度和box盒子相同,高度40px,相对定位,层级为1(为了盖住相接的边框),设置边框去掉下边框,设置背景色.设置隐藏盒子宽度大于购物车盒子,绝对定位,top为上面盒子的高度,让它隐藏.在大盒子上给hover 选择隐藏盒子,让它出现,调整背景色与字体颜色.再次给大盒子hover ,选择购物车盒子 ,调整背景色与字体颜色.
具体说明:
目前很多电商网站上面都有很多hover效果,如JD顶部就有6个hover效果.鼠标放上去,目标区域改变背景色与下面隐藏区域的背景色相同,隐藏区域与目标区域交界处的边框消失.移出区域,恢复原样.隐藏区域的上边框与目标区域的交界处消失,仿佛隐藏区域和目标区域形成了一个不规则的盒子.其实是因为目标区域设置了层级,相对隐藏区域更高,刚好盖住了相接处的边框部分.
可能疑惑的点:
1.为什么给box加相对定位,因为隐藏区域绝对定位放到目标区域的下面,如果不加相对定位,网页放大缩小,隐藏区域就会移动.
2.为什么给购物车盒子加相对定位,因为要使隐藏区域与购物车盒子相接处边框部分看不见,就必须让购物车盒子高于隐藏盒子,不加定位,只设层级,不起作用,也就是说必须定位后加层级才有效果.
3.必须先给隐藏盒子和购物车盒子加上边框嘛.不一定,根据实际情况,就JD来说,边框都可以加在最后hover选择盒子时的

<style>            #box:hover  .shopcar {                                 border:1px solid red;                                 border-bottom:none;       }           #box:hover   .hidden{                               border:1px solid red;        }</style>

table切换在网页上也是经常出现.按照惯例,还是先附上代码(简单仿写下JD楼层table切换).
先写网页内容:

<div id="box">      <div id="tab">            <ul id="ul">                <li class="list">按钮1</li>                <li>按钮2</li>                <li>按钮3</li>                <li>按钮4</li>                <li>按钮5</li>            </ul>      </div>          <div id="hide">               <div class="hd1">你的能力要比你的欲望大,才可以有好的生活。</div>               <div class="hd2">耐得住寂寞,才守得住繁华；耐得住寒冬,才等得到花开.</div>               <div class="hd3">如人饮水,冷暖自知</div>               <div class="hd4">爱我你就抱抱我</div>               <div class="hd5">爱我你就亲亲我</div>          </div></div>

再加入样式:

<style>      *{margin:0;        padding:0;        list-style:none;      }      #box{           margin:0 auto;           width:660px;           height:400px;           position:relative;                }      #tab{           width:300px;           height:40px;           margin:0 auto;      }      #tab li{              float:left;              width:58px;              height:40px;       }       #tab .list{                   border-left:1px solid red;                  border-right:1px solid red;                  border-top:3px solid red;                  position:relative;                  z-index:1;                  background:#FFFFFF;        }       #hide div{                 width:360px;                 height:300px;                 position:absolute;                 left:150px;                 top:42px;                 border:1px solid red;                 display:none;                 font-size:12px;                 line-height:300px;                 text-align:center;           }        #hide .hd1{display:block;}</style>

再用JS操作DOM元素

<script>     window.onload=function(){                                 var lis=document.getElementsByTagName("li");                                var divbox=document.getElementById("hide");                                var div=divbox.getElementsByTagName("div");         for(var i=0;i<lis.length;i++){            lis[i].xuhao=i;            lis[i].onmouseover=function(){                var num=this.xuhao;                for(var j=0;j<lis.length;j++){                    div[j].style.display="none";                    lis[j].className="";                }                div[num].style.display="block";                lis[num].className="list";            }        }     }</script>

代码功能分析:
首先设一个大盒子,ID为box,宽高为660px与400px,居中并给它相对定位.在其中设两个盒子,分别设ID为 tab与hide, tab盒子的宽高为300px与40px,居中,在tab里面设置一个无序列表,设其宽高为58px与40px,让它左浮动,
在第一个li中设一个class为list, 给list设置边框样式,让它相对定位,设背景颜色,设层级为1(为了遮盖相接的边框).给hide盒子中的所有div设置样式,宽高为360px与300px,设置边框,设置绝对定位,设置left与top值,让它定位到li的下面,给它们隐藏起来.在第一个div中设置class为 hd1, 让它出现.
当页面加载好时,抓取所有为li标签的元素设名字为lis,抓取ID标签为hide的元素设名字为divbox,再抓取divbox中的div设名字为div.用第一个for循环绑定所有lis的序号,给lis添加鼠标事件(当鼠标指针移动到lis区域立即触发),
将每个序号赋值给num,在用for循环给所有div盒子隐藏起来,去除lis所有的class,给div绑定序号并使其显示,给lis绑定序号并使其class为list.

具体说明:由于笔者是仿JDTable切换的写的,所以颜色与其相近,可以参考下JD的楼层table切换.每次移动不同的区域,下方弹出不同的内容,并且下面的上边框与其点击目标区域相接处看不见,是不是和购物车很像,但是还是有区别的.所有遮盖边框部分的方式和上文我讲的设定位设层级是一样的.但是每次移动之前点击的区域边框颜色消失,正在点击的区域出现边框,再移动到其他区域,前面出现的边框消失,鼠标悬停区域出现边框.一句话总结,边框总是出现在鼠标悬停区域的位置.那么我设置一个边框样式每次给鼠标悬停区域不就是实现效果了啊(lis[num].className=”list”),但是光是这样是不行的,那么我在移动完了所有区域后,全部有了边框还不会消失.所以在第二个for循环里加上lis[j].className=”“,让没被鼠标指针碰到的区域边框去掉.这样就实现了移动那里,那里有边框,出来后边框去掉的效果.鼠标悬停不仅边框要出来,下面还有隐藏区域要出来,我可以通过第二个FOR循环先让它们全部消失(div[j].style.display=”none”),然后让鼠标悬停区域对应的隐藏区域出来(div[num].style.display=”block”).

可能疑惑的点:
1.css中让class为list的li有背景色,是为了遮盖相接的下边框.每次鼠标悬停区域出现背景色,遮盖相接的下边框.还要记得加上层级,使其高于下面区域.
2.在js代码中不是用FOR循环已经给所有下面盒子都设了隐藏,怎么还在CSS设置隐藏呢.
这是为了刚打开页面 ,所有盒子聚在同一个区域非常难看,因为JS中设置了window.onload,它会等页面加载完了,在执行.
如果不在CSS设置隐藏,打开页面会下面会出现密密麻麻的内容,但是CSS中让所有盒子隐藏了,用户看网页不是什么都看不到吗.所有还得通过第一个div的class设置block,让第一个盒子在刚打开页面就能看见.
3.table实现的方法还有多种,笔者觉得这种方法比较容量刚接触网页设计的人理解,故贴了上来.由于笔者第一次写博客,经验不足,学识浅薄,肯定有非常多的不足,还望各位前辈不吝指教斧正.
贴上图片:

谢谢您花时间看完了全部内容,再见!