.wrap {
width:60px;
height:30px;
background-color:#ccc;
border-radius:16px;
position:relative;
transition:0.3s
}
.circle {
width:29px;
height:29px;
background-color:#fff;
border-radius:50%;
position:absolute;
left:0px;
transition:0.3s;
box-shadow:0px 1px 5px rgba(0,0,0,.5);
}
.circle:hover {
transform:scale(1.2);
box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
按钮仅用到两个div,非常简单。jq添加点击事件,获取到的left要转换为数值才能赋值;