手风琴效果

最新推荐文章于 2019-06-20 19:28:14 发布

原创最新推荐文章于 2019-06-20 19:28:14 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#手风琴效果

JS类专栏收录该内容

202 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的角色选择菜单交互设计案例。该案例通过鼠标悬停效果展示不同种族的角色，并允许用户点击切换显示的角色类型。文章详细展示了如何利用CSS样式和JavaScript事件处理来创建平滑的过渡效果。

html

css：

*{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
li{
list-style:none;
}
.group-box{
height:230px;
overflow:hidden;
margin:60px auto;
}
.group-bd{
width:70px;
height:230px;
overflow:hidden;
position:relative;
float:left;
background:pink;
transition:all 0.3s linear;
}
.group-txt{
width:70px;
background:#3b8bed;
height:230px;
position:relative;
display:block;
color:#fff;
}
.group-item{
width:749px;
height:230px;
position:absolute;
top:0;
left:70px;
}
.on{
width:819px;
}
.group-item li{
width:60px;
height:230px;
position:relative;
float:right;
overflow:hidden;
background:yellow;
transition:all 0.3s linear;
}
.group-item li>a{
width:58px;
float:right;
height:228px;
border:1px solid #fff;
margin-left:-1px;
position:relative;
}
.group-item li{
position:relative;
}
.role-item{
width:390px;
position:absolute;
right:59px;
top:0;
height:230px;
background:green;
color:#fff;
text-align:center;
line-height:230px;
}
.group-item .on{
width:449px;
}

js：

/**
* Created by SlzStar on 2017/8/14.
*/
window.onload = function(){
var group_txt = document.getElementsByClassName("group-txt");
var group_bd = document.getElementsByClassName("group-bd");
for(var i = 0;i<group_txt.length;i++){
group_txt[i].onclick = function(){
for(var j = 0;j<group_bd.length;j++){
group_bd[j].classList.remove("on");
}
this.parentElement.classList.add("on");
}
}

var role_txt = document.getElementsByClassName("role-txt");
var run;
for(var i = 0;i<role_txt.length;i++){
role_txt[i].onmouseover = function(){
var lis = this.parentElement.parentElement.getElementsByTagName("li");
var myThis = this;
run = setTimeout(function(){
for(var j = 0;j<lis.length;j++){
lis[j].classList.remove("on");
}
myThis.parentElement.classList.add("on");
},200);
}
role_txt[i].onmouseout = function(){
clearTimeout(run);
}
}
}