新增第135个小实例：左侧分类菜单右侧轮播图的组合布局
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
ddab273920
commit
3c16c31984
|
|
@ -141,4 +141,5 @@
|
|||
131. HTML5+CSS3小实例：纯CSS实现打字动画特效
|
||||
132. HTML5+CSS3+JS小实例：上下滚动的数字时钟
|
||||
133. HTML5+CSS3+JS小实例：带标题描述的圆角图片手风琴效果
|
||||
134. HTML5+CSS3小实例：简单又别致的环形加载动画
|
||||
134. HTML5+CSS3小实例：简单又别致的环形加载动画
|
||||
135. HTML5+CSS3+Vue小实例：左侧分类菜单右侧轮播图的组合布局
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中显示 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(to top,#e6e9f0,#eef1f5);
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
a:link,a:visited{
|
||||
color: #5e5e5e;
|
||||
}
|
||||
.container{
|
||||
width: 95vw;
|
||||
max-width: 1200px;
|
||||
height: 460px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.banner-slide{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 默认都隐藏 */
|
||||
display: none;
|
||||
}
|
||||
.slide1{
|
||||
background: url(/images/135/banner1.jpg) no-repeat;
|
||||
}
|
||||
.slide2{
|
||||
background: url(/images/135/banner2.jpg) no-repeat;
|
||||
}
|
||||
.slide3{
|
||||
background: url(/images/135/banner3.jpg) no-repeat;
|
||||
}
|
||||
/* banner激活态 */
|
||||
.slide-active{
|
||||
display: block;
|
||||
}
|
||||
/* 上一张、下一张按钮 */
|
||||
.button{
|
||||
width: 40px;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 244px;
|
||||
margin-top: -40px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button.next{
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.button .fa{
|
||||
font-size: 50px;
|
||||
color: #fff;
|
||||
}
|
||||
.button:hover{
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
/* 指示器 */
|
||||
.dots{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
.dots span{
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(7,17,27,0.4);
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
|
||||
}
|
||||
/* 激活态 */
|
||||
.dots span.dot-active{
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 0 0 2px rgba(7,17,27,0.4);
|
||||
}
|
||||
/* 左侧分类菜单 */
|
||||
.menu-content{
|
||||
width: 244px;
|
||||
height: 460px;
|
||||
background-color: rgba(7,17,27,0.25);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.menu-item{
|
||||
height: 64px;
|
||||
line-height: 66px;
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-item a{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
padding: 0 8px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||
height: 64px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.menu-item:last-child a{
|
||||
border-bottom: none;
|
||||
}
|
||||
.menu-item a span{
|
||||
flex: 1;
|
||||
}
|
||||
.menu-item a .fa{
|
||||
color: rgba(255,255,255,0.6);
|
||||
font-size: 18px;
|
||||
}
|
||||
/* 二级分类菜单 */
|
||||
.sub-menu{
|
||||
border: 1px solid #d9dde1;
|
||||
background-color: #fff;
|
||||
width: calc(80vw - 244px);
|
||||
max-width: 730px;
|
||||
height: 458px;
|
||||
position: absolute;
|
||||
left: 244px;
|
||||
top: 0;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.hide{
|
||||
display: none;
|
||||
}
|
||||
.inner-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(/images/135/fe.png) no-repeat;
|
||||
overflow: auto;
|
||||
}
|
||||
.sub-inner-box{
|
||||
width: 100%;
|
||||
margin-left: 40px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
.sub-inner-box .title{
|
||||
color: #f01414;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: bold;
|
||||
margin-top: 28px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.sub-inner-box .sub-row{
|
||||
margin-bottom: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.sub-inner-box .sub-row .bold{
|
||||
font-weight: 700;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.sub-inner-box .sub-row a{
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>左侧分类菜单右侧轮播图的组合布局</title>
|
||||
<!-- 引入字体图标 -->
|
||||
<link rel="stylesheet" href="/fonts/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="135.css">
|
||||
<!-- 这里我用的是vue的写法，并不是原生JS，用原生也可实现，只是代码量会多一些 -->
|
||||
<script src="/js/vue.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="app">
|
||||
<!-- banner -->
|
||||
<div class="banner" @mouseover="stopAutoPlay" @mouseout="startAutoPlay">
|
||||
<a href="" v-for="item in banner_size">
|
||||
<div :class="['banner-slide', 'slide'+item, item==banner_index?'slide-active':'']"></div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- 上一张、下一张按钮 -->
|
||||
<div class="button prev" @click="prevBanner">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</div>
|
||||
<div class="button next" @click="nextBanner">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
<!-- 指示器 -->
|
||||
<div class="dots">
|
||||
<span v-for="item in banner_size" :class="item==banner_index?'dot-active':''" @click="changeBanner(item)"></span>
|
||||
</div>
|
||||
<!-- 分类菜单 -->
|
||||
<div class="menu-content" @mouseout="hideSubMenu">
|
||||
<div class="menu-item" v-for="(item,index) in menu_list" @mouseover="showSubMenu(index)">
|
||||
<a href="">
|
||||
<span>{{item.title}}</span>
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 二级菜单 -->
|
||||
<div class="sub-menu hide" @mouseover="showSubMenu(-1)" @mouseout="hideSubMenu">
|
||||
<div class="inner-box" v-for="(item,index) in menu_list" v-if="menu_item_index==index">
|
||||
<div class="sub-inner-box">
|
||||
<div class="title">{{item.title}}</div>
|
||||
<div class="sub-row" v-for="item1 in item.list">
|
||||
<span class="bold">{{item1.menu_title}} :</span>
|
||||
<a href="" class="menu" v-for="item2 in item1.menus">{{item2}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script src="135.js"></script>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
new Vue({
|
||||
el:'#app',
|
||||
data:{
|
||||
timer:null, //定时器，用于banner轮播
|
||||
banner_index:1, //当前banner下标
|
||||
banner_size:3, //banner数量
|
||||
menu_item_index:0, //当前鼠标移入的分类菜单下标
|
||||
// 分类菜单数据（json格式，我提前整理好的）
|
||||
menu_list:[{
|
||||
title:'手机、配件',
|
||||
list:[{
|
||||
menu_title:'手机通讯',
|
||||
menus:['手机','手机维修','以旧换新']
|
||||
},
|
||||
{
|
||||
menu_title:'手机配件',
|
||||
menus:['手机壳','手机存储卡','数据线','充电器','电池']
|
||||
},
|
||||
{
|
||||
menu_title:'运营商',
|
||||
menus:['中国联通','中国移动','中国电信']
|
||||
},
|
||||
{
|
||||
menu_title:'智能设备',
|
||||
menus:['智能手环','智能家居','智能手表','其他配件']
|
||||
},
|
||||
{
|
||||
menu_title:'娱乐',
|
||||
menus:['耳机','音响','收音机','麦克风']
|
||||
}]
|
||||
},
|
||||
{
|
||||
title:'电脑',
|
||||
list:[{
|
||||
menu_title:'电脑',
|
||||
menus:['笔记本','平板','一体机']
|
||||
},
|
||||
{
|
||||
menu_title:'电脑配件',
|
||||
menus:['显示器','CPU','主板','硬盘','电源','显卡','其他配件']
|
||||
},
|
||||
{
|
||||
menu_title:'游戏设备',
|
||||
menus:['游戏机','耳机','游戏软件']
|
||||
},
|
||||
{
|
||||
menu_title:'网络产品',
|
||||
menus:['路由器','网络机顶盒','交换机','存储卡','网卡']
|
||||
},
|
||||
{
|
||||
menu_title:'外部产品',
|
||||
menus:['鼠标','键盘','U盘','移动硬盘','鼠标垫','电脑清洁']
|
||||
}]
|
||||
},
|
||||
{
|
||||
title:'家用电器',
|
||||
list:[{
|
||||
menu_title:'电视',
|
||||
menus:['国产品牌','日韩品牌','欧美品牌']
|
||||
},
|
||||
{
|
||||
menu_title:'空调',
|
||||
menus:['显示器','柜式','中央','壁挂式']
|
||||
},
|
||||
{
|
||||
menu_title:'冰箱',
|
||||
menus:['多门','对开门','三门','双门']
|
||||
},
|
||||
{
|
||||
menu_title:'洗衣机',
|
||||
menus:['滚筒式洗衣机','迷你洗衣机','洗烘一体机']
|
||||
},
|
||||
{
|
||||
menu_title:'厨房电器',
|
||||
menus:['油烟机','洗碗机','燃气灶']
|
||||
}]
|
||||
},
|
||||
{
|
||||
title:'家具',
|
||||
list:[{
|
||||
menu_title:'家纺',
|
||||
menus:['被子','枕头','四件套','床垫']
|
||||
},
|
||||
{
|
||||
menu_title:'灯具',
|
||||
menus:['台灯','顶灯','节能灯','应急灯']
|
||||
},
|
||||
{
|
||||
menu_title:'厨具',
|
||||
menus:['烹饪锅具','餐具','菜板刀具']
|
||||
},
|
||||
{
|
||||
menu_title:'家装',
|
||||
menus:['地毯','沙发垫套','装饰字画','照片墙','窗帘']
|
||||
},
|
||||
{
|
||||
menu_title:'生活日用',
|
||||
menus:['收纳用品','浴室用品','雨伞雨衣']
|
||||
}]
|
||||
}]
|
||||
},
|
||||
methods:{
|
||||
// banner播放停止
|
||||
stopAutoPlay(){
|
||||
if(this.timer){
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
},
|
||||
// banner播放开始
|
||||
startAutoPlay(){
|
||||
let _t=this;
|
||||
// 3秒切换
|
||||
_t.timer=setInterval(function(){
|
||||
_t.banner_index++;
|
||||
if(_t.banner_index>_t.banner_size){
|
||||
_t.banner_index=1;
|
||||
}
|
||||
},3000);
|
||||
},
|
||||
// 上一张
|
||||
prevBanner(){
|
||||
this.stopAutoPlay();
|
||||
this.banner_index--;
|
||||
if(this.banner_index<=0){
|
||||
this.banner_index=this.banner_size;
|
||||
}
|
||||
this.startAutoPlay();
|
||||
},
|
||||
// 下一张
|
||||
nextBanner(){
|
||||
this.stopAutoPlay();
|
||||
this.banner_index++;
|
||||
if(this.banner_index>this.banner_size){
|
||||
this.banner_index=1;
|
||||
}
|
||||
this.startAutoPlay();
|
||||
},
|
||||
// 切换banner显示（点击指示器）
|
||||
changeBanner(index){
|
||||
this.stopAutoPlay();
|
||||
this.banner_index=index;
|
||||
this.startAutoPlay();
|
||||
},
|
||||
// 显示对应的二级分类菜单
|
||||
showSubMenu(index){
|
||||
if(index!=-1){
|
||||
this.menu_item_index=index;
|
||||
}
|
||||
document.querySelector('.sub-menu').classList.remove('hide');
|
||||
},
|
||||
// 隐藏二级分类菜单
|
||||
hideSubMenu(){
|
||||
document.querySelector('.sub-menu').classList.add('hide');
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.startAutoPlay();
|
||||
}
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Loading…
Reference in New Issue