.image08 {
width:1200px;
margin:0 auto;
}
.image08::after,.image08Box::after {
content:'';
display:block;
clear:both;
}
.image08_list {
width:260px;
float:left;
}
.image08_list li {
width:100%;
height:75px;
background:url(images/telephone.png) no-repeat 10px center #f3f3f3;
margin-bottom:5px;
color:#fff;
background-size:40px;
-webkit-transition:.3s all;
transition:.3s all;
}
.image08_list li:last-child {
margin-bottom:0px;
}
.image08_list li a {
display:block;
line-height:75px;
padding-left:70px;
}
.image08_content {
width:900px;
height:475px;
position:relative;
float:right;
overflow:hidden;
}
.image08_content_box {
position:absolute;
top:0;
left:0;
height:99999px;
}
.image08_content .image08Box {
width:860px;
height:435px;
}
.image08Box {
background:#f3f3f3;
padding:20px;
}
.image08Box .image08_img {
width:560px;
height:435px;
float:left;
overflow:hidden;
}
.image08Box .image08_img img {
display:block;
width:100%;
height:100%;
-webkit-transition:.3s all;
transition:.3s all;
}
.image08Box .image08_text {
float:right;
width:280px;
}
.image08Box .image08_text h3 {
font-size:22px;
padding-bottom:22px;
margin-top:20px;
position:relative;
margin-bottom:20px;
}
.image08Box .image08_text h3::after {
content:'';
position:absolute;
left:0;
bottom:0;
width:80px;
height:2px;
background:#999;
}
.image08Box .image08_text p {
line-height:30px;
}
.image08Box .image08_text a {
display:block;
text-align:center;
width:120px;
line-height:34px;
border:1px solid #dedede;
border-radius:17px;
color:#666;
font-size:14px;
margin-top:40px;
-webkit-transition:.3s all;
transition:.3s all;
}
.image08_list li:hover,.image08_active {
background-color:#0ff !important;
}
.image08Box:hover img {
transform:scale(1.1);
-webkit-transform:scale(1.1);
}
.image08Box .image08_text a:hover {
background-color:#0ff;
border-color:#0ff;
}
更新时间:2021-09-18 10:26:01
调用方式
switch({
navs: * 栏目标题直接父元素,
contents: * 切换容器元素的直接父元素,
navcss: 栏目切换元素跟随css样式名,
pattern: 切换方式,有两种:hover(鼠标经过切换)、click(鼠标点击切换),
mode: {name: "", direction:""}切换容器布局方式,有两种:position(定位布局),display(隐藏布局),其中定位需设置方向direction:"left" or "top"
time: 切换效果时间
})