js table栏切换+border绘制三角形特殊应用

来源：互联网发布：用户管理系统java 编辑：程序博客网时间：2024/06/17 16:24
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}body{    width: 100%;    height: 100%;    background-color: #f6f6f6;}.count{width: 390px;    height: 444px;    /*border: 1px solid #000;*/    margin: 40px auto;    background-color: white;}.box_top{width: 100%;height: 55px;    background-color: #e77005;    position: relative;}.box_1{position: absolute;    top: 0;    left: 0;    width: 0;    height: 0;    border-top: 20px solid #f6f6f6;    border-right: 20px solid transparent;    }    .box_2{    position: absolute;    top: 3px;    left: 3px;    width: 0;    height: 0;    border-top: 15px solid #c02c2c;    border-right: 15px solid transparent;    }    h3{    font-family: fzzhengheis-el-gbregular;    font-size: 26px;    font-weight: 400;    line-height: 40px;    height: 40px;    padding-top: 6px;    margin-left: 40px;    color: white;    }    .box_subit{    position: absolute;    top: 20px;    right: 45px;    float: right;    height: 24px;    line-height: 24px;    font-size: 14px;    color: #fff;    }    .yuan{    height: 15px;    width: 15px;    border: 1px solid white;    position: absolute;top: 24px;right: 20px;border-radius: 50%;color: white;    }    .dian{    position: absolute;    top: -2px;    left: 3px;    font-size: 13px;    }    .bottom_top{    padding: 6px 0 7px;    width: 370px;    height: 18px;    font-size: 0;    white-space: nowrap;    overflow: hidden;    margin: 0 auto;    position: relative;    }    .move{    position: absolute;    top: 28px;    left: 0;    width: 75px;    height: 3px;    background-color: red;    border-radius: 10px;    }    .bottom_top>a{    display: inline-block;    width: 75px;    border-right: 1px solid #d2d1d1;    font-size: 14px;    text-align: center;    }    .bottom_bottom{    width: 370px;    height: 335px;    border-top: 1px solid #e7e7e7;    padding: 10px;    }    ul>li{    position: relative;    float: left;    height: 167px;    width: 123px;    text-align: center;    list-style: none;    display: inline-block;    box-sizing: border-box;    }    .border_right{    border-right: 1px solid #e7e7e7    }     .border_bottom{    border-bottom: 1px solid #e7e7e7    }    .bottom_bottom>ul{    float: left;    }    .bao_pi{    height: 142px;    width: 122px;    padding: 12px 0;    }    .bao_pi>div:nth-child(1){    width: 100px;    height: 100px;    background-color: royalblue;    margin-left: 5px;    }    .bao_pi>div:nth-child(2){    font-size: 11px;    width: 107px;    margin-top: 10px;    margin-left: 4px;    height: 32px;    overflow: hidden;    }</style></head><body><div class="count"><div class="box_top"><!--左上角小三角--><div class="box_1"></div><div class="box_2"></div><h3>排行榜</h3><a class="box_subit">专属你的购物指南</a><div class="yuan"><div class="dian">></div></div></div><div class="box_bottom"><div class="bottom_top"><div class="move"></div><a  class="move_a">抱枕靠垫</a><a  class="move_a">手机通讯</a><a  class="move_a">冰箱</a><a  class="move_a">饮料冲调</a><a  class="move_a">粮油调味</a></div><div class="bottom_bottom"><ul class="ul_1" style="display:block;"><li class="border_right border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4459/235/331983240/152011/c0050075/58cdcda0Nc7e03b8b.jpg!q90.webp"></div><div>【京东超市】金沙河面条挂面 珍品龙须面营养拉面细干拌面条1000G</div></div></li><li class="border_right border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4891/287/1067423208/91595/a0bd8bd0/58ec7e24Nf03b204d.jpg!q90.webp"></div><div>【京东超市】福临门 东北大米 水晶米 中粮出品 大米5kg</div></div></li><li class="border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t3160/181/5242003839/378678/289bbaf2/5866146aN3d00b47b.jpg!q90.webp"></div><div>【京东超市】金龙鱼 东北大米 蟹稻共生 盘锦大米5KG(包装更新，新老包装随机发放）</div></div></li><li class="border_right"><div class="bao_pi"><div><img src="http://img10.360buyimg.com/mobilecms/s100x100_jfs/t3127/49/5333038539/285427/91b3ea36/58661521N82982242.jpg!q90.webp"></div><div>【京东超市】金龙鱼 东北米 粳米 寒地东北大米 5kg </div></div></li><li class="border_right"><div class="bao_pi"><div><img src="http://img13.360buyimg.com/mobilecms/s100x100_g10/M00/0E/02/rBEQWVFPsuoIAAAAAAD25TOlJ_gAACwJgGGJEYAAPb9270.jpg!q90.webp"></div><div>【京东超市】王致和 精制料酒 500ml</div></div></li><li><div class="bao_pi"><div><img src="http://img14.360buyimg.com/mobilecms/s100x100_jfs/t3616/326/306661277/43954/bf366f32/5805c97dN0ab2219c.jpg!q90.webp"></div><div>【京东超市】金龙鱼 食用油 纯香菜籽油5L</div></div></li></ul><ul class="li_2"  style="display:none;"><li class="border_right border_bottom"><div class="bao_pi"><div></div><div>【京东超市】金沙河面条挂面 珍品龙须面营养拉面细干拌面条1000G</div></div></li><li class="border_right border_bottom"><div class="bao_pi"><div></div><div>【京东超市】福临门 东北大米 水晶米 中粮出品 大米5kg</div></div></li><li class="border_bottom"><div class="bao_pi"><div></div><div>【京东超市】金龙鱼 东北大米 蟹稻共生 盘锦大米5KG(包装更新，新老包装随机发放）</div></div></li><li class="border_right"><div class="bao_pi"><div></div><div>【京东超市】金龙鱼 东北米 粳米 寒地东北大米 5kg </div></div></li><li class="border_right"><div class="bao_pi"><div></div><div>【京东超市】王致和 精制料酒 500ml</div></div></li><li><div class="bao_pi"><div></div><div>【京东超市】金龙鱼 食用油 纯香菜籽油5L</div></div></li></ul><ul class="ul_3" style="display:none;"><li class="border_right border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4459/235/331983240/152011/c0050075/58cdcda0Nc7e03b8b.jpg!q90.webp"></div><div>【京东超市】金沙河面条挂面 珍品龙须面营养拉面细干拌面条1000G</div></div></li><li class="border_right border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4891/287/1067423208/91595/a0bd8bd0/58ec7e24Nf03b204d.jpg!q90.webp"></div><div>【京东超市】福临门 东北大米 水晶米 中粮出品 大米5kg</div></div></li><li class="border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t3160/181/5242003839/378678/289bbaf2/5866146aN3d00b47b.jpg!q90.webp"></div><div>【京东超市】金龙鱼 东北大米 蟹稻共生 盘锦大米5KG(包装更新，新老包装随机发放）</div></div></li><li class="border_right"><div class="bao_pi"><div><img src="http://img10.360buyimg.com/mobilecms/s100x100_jfs/t3127/49/5333038539/285427/91b3ea36/58661521N82982242.jpg!q90.webp"></div><div>【京东超市】金龙鱼 东北米 粳米 寒地东北大米 5kg </div></div></li><li class="border_right"><div class="bao_pi"><div><img src="http://img13.360buyimg.com/mobilecms/s100x100_g10/M00/0E/02/rBEQWVFPsuoIAAAAAAD25TOlJ_gAACwJgGGJEYAAPb9270.jpg!q90.webp"></div><div>【京东超市】王致和 精制料酒 500ml</div></div></li><li><div class="bao_pi"><div><img src="http://img14.360buyimg.com/mobilecms/s100x100_jfs/t3616/326/306661277/43954/bf366f32/5805c97dN0ab2219c.jpg!q90.webp"></div><div>【京东超市】金龙鱼 食用油 纯香菜籽油5L</div></div></li></ul><ul class="ul_4" style="display:none;"><li class="border_right border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4459/235/331983240/152011/c0050075/58cdcda0Nc7e03b8b.jpg!q90.webp"></div><div>【京东超市】金沙河面条挂面 珍品龙须面营养拉面细干拌面条1000G</div></div></li><li class="border_right border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4891/287/1067423208/91595/a0bd8bd0/58ec7e24Nf03b204d.jpg!q90.webp"></div><div>【京东超市】福临门 东北大米 水晶米 中粮出品 大米5kg</div></div></li><li class="border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t3160/181/5242003839/378678/289bbaf2/5866146aN3d00b47b.jpg!q90.webp"></div><div>【京东超市】金龙鱼 东北大米 蟹稻共生 盘锦大米5KG(包装更新，新老包装随机发放）</div></div></li><li class="border_right"><div class="bao_pi"><div><img src="http://img10.360buyimg.com/mobilecms/s100x100_jfs/t3127/49/5333038539/285427/91b3ea36/58661521N82982242.jpg!q90.webp"></div><div>【京东超市】金龙鱼 东北米 粳米 寒地东北大米 5kg </div></div></li><li class="border_right"><div class="bao_pi"><div></div><div>【京东超市】王致和 精制料酒 500ml</div></div></li><li><div class="bao_pi"><div><img src="http://img14.360buyimg.com/mobilecms/s100x100_jfs/t3616/326/306661277/43954/bf366f32/5805c97dN0ab2219c.jpg!q90.webp"></div><div>【京东超市】金龙鱼 食用油 纯香菜籽油5L</div></div></li></ul><ul class="ul_5" style="display:none;"><li class="border_right border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4459/235/331983240/152011/c0050075/58cdcda0Nc7e03b8b.jpg!q90.webp"></div><div>【京东超市】金沙河面条挂面 珍品龙须面营养拉面细干拌面条1000G</div></div></li><li class="border_right border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4891/287/1067423208/91595/a0bd8bd0/58ec7e24Nf03b204d.jpg!q90.webp"></div><div>【京东超市】福临门 东北大米 水晶米 中粮出品 大米5kg</div></div></li><li class="border_bottom"><div class="bao_pi"><div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t3160/181/5242003839/378678/289bbaf2/5866146aN3d00b47b.jpg!q90.webp"></div><div>【京东超市】金龙鱼 东北大米 蟹稻共生 盘锦大米5KG(包装更新，新老包装随机发放）</div></div></li><li class="border_right"><div class="bao_pi"><div><img src="http://img10.360buyimg.com/mobilecms/s100x100_jfs/t3127/49/5333038539/285427/91b3ea36/58661521N82982242.jpg!q90.webp"></div><div>【京东超市】金龙鱼 东北米 粳米 寒地东北大米 5kg </div></div></li><li class="border_right"><div class="bao_pi"><div><img src="http://img13.360buyimg.com/mobilecms/s100x100_g10/M00/0E/02/rBEQWVFPsuoIAAAAAAD25TOlJ_gAACwJgGGJEYAAPb9270.jpg!q90.webp"></div><div>【京东超市】王致和 精制料酒 500ml</div></div></li><li><div class="bao_pi"><div></div><div>【京东超市】金龙鱼 食用油 纯香菜籽油5L</div></div></li></ul></div></div></div></body><script>var move_aArr = document.getElementsByClassName('move_a');var move = document.getElementsByClassName('move')[0];var ulArr = document.getElementsByClassName('bottom_bottom')[0].children;var ulStatus = 0;for(var i=0; i<move_aArr.length;i++){move_aArr[i].setAttribute('index',i);move_aArr[i].onmousemove = function(){var index = this.getAttribute('index');move.style.cssText = 'transform:translateX('+index*76+'px);'+'transition-duration:0.5s;'+'transition-timing-function:ease';for( var j=0 ;j<ulArr.length; j++){ulArr[j].style.cssText = 'display:none;';}ulArr[index].style.cssText = 'display:block;';}}</script></html>
阅读全文
0 0