.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: 切换效果时间 })