<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
* {margin: 0;padding:0;}
li{list-style: none;}
.main > ul{
width: 200px;
height:30px;
border: 1px solid blue;
}
.main> ul> li{
width:33%;
height:30px;
float:left;
border: 1px solid red;
box-sizing: border-box;
cursor: pointer;
}
.clearfix::after {
display: block;
content: '.';
clear: both;
}
.bar {
width: 200px;
height: 3px;
margin-top: 10px;
border: 1px solid blue;
}
.inner {
width: 70px;
height: 3px;
background-color: green;
transition: all 0.3s;
}
.state-2 {
margin-left:70px
}
.state-3 {
margin-left: 130px;
}
</style>
</head>
<body>
<div class="main">
<ul class="clearfix">
<li id="li1">html</li>
<li id="li2">css</li>
<li id="li3">js</li>
</ul>
<div class="bar">
<div id="innerBar" class="inner state-3"></div>
</div>
</div>
<script>
window.onload = function() {
var oLi1 = document.getElementById('li1');
var oLi2 = document.getElementById('li2');
var oLi3 = document.getElementById('li3');
var inner = document.getElementById('innerBar')
oLi1.onclick=function() {
inner.className = 'inner';
}
oLi2.onclick=function() {
inner.className = 'inner state-2';
}
oLi3.onclick=function() {
inner.className = 'inner state-3';
}
}
</script>
</body>
</html>
效果可以自己试试哦，切换的动效可以用transition：all 0.3s; 这一行立马就做出来了，
transition: all 0.3s;这个加在变化的 标签上面，那么这个标签出现了变动，比如说left值改变了，
或者translateX()值改变了的话，就都会有一个过渡的效果，
不会很生硬。比如left值从0转变到100，就可以慢慢地从0过渡到100，而不是一下子就从0到了100
复制代码
监听动画执行结束
$('.img').on('transitionend',function() {
//do something you want
});
只监听一次动画结束之后就不监听了
$('.img').one('transitionend',function() {
//do something you want
})
复制代码
5120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
