js实现标签下划线平移

一.使用js实现导航行栏，点击时，下划线会跟着鼠标的点击移动。
html代码如下：

<header>
<div id="nav1">
<div id="id1" class="item">1</div>
<div id="id2" class="item">2</div>
<div id="id3" class="item">3</div>
</div>
<div id="line"></div>
</header>

css代码如下：

*{
margin:0;
padding:0;
}
body{
background: url("./img/wallhaven1.png");
}
.item{
width: 100px;
height: 30px;
margin-bottom: 5px;
margin-left: 5px;
padding: 5px 10px;
background: #B89C9B;
text-align: center;
line-height: 30px;
color:white;
border-radius: 10px;

}

#line{
color:red;
width: 4px;
height: 40px;
background: red;
position: absolute;
top:0px;
padding-right: 1px;
}

js代码如下：

<script>
function avtiveLineTop(n) {
document.getElementById('line').style.top = n + 'px';
};
var nav1 = document.getElementById("nav1");
var items = document.getElementsByClassName('item');
nav1.addEventListener("click",handle,false);
function handle(event){
var event=event||window.event;
var target=event.target||event.srcElement;;
switch(target.id){
case "id1":
avtiveLineTop(0);
break;
case "id2":
avtiveLineTop(45);
break;
case "id3":
avtiveLineTop(90);
break;
}
}
</script>

效果图：
默认时，红色横线在1标签处，点击2时，红色标签，会根据移动函数进行移动，如图（2）






二.在此基础上，根据css3来实现横线的过度平滑效果。
html代码如下：

<section>
<ul id="nav2">
<li  class="item1"><a href="#" id="id11">课程学习</a></li>
<li  class="item1"><a href="#" id="id21">课程笔记</a></li>
<li  class="item1"><a href="#" id="id31">课程练习</a></li>
<li  class="item1"><a href="#" id="id41">课程相关</a></li>
<li  class="item1"><a href="#" id="id51">课程拓展</a></li>
</ul>
<div id="line1"></div>
</section>
<div style="clear:both;"></div>
<div id="pic">
<img src="./img/wallhaven3.png" alt="人物">
</div>

css代码如下：

.item1{
width: 100px;
height: 30px;
margin-bottom: 5px;
margin-left: 5px;
padding: 5px 10px;
background: #1E293B;
float:left;
text-decoration:none;
color:white;
line-height: 30px;
border-radius: 10px;

}

#line1{
color:red;
width: 120px;
height: 2px;
background: red;
position: absolute;
top:175px;
left:5px;
padding-top: 1px;

}
#nav2{
list-style-type: none;
}
#nav2 a{
display: block;
text-decoration:none;
color:white;
}
#nav2 a:hover{
background-color: #1E291a;
color:red;
}
#pic{
margin-top:80px;
margin-left: 10px;

}
img{
width: 200px;
height:200px;
border-radius: 15px;
}
.effect0{
transform: translateX(1px);
transition:all  2s;
}
.effect{
transform: translateX(125px);
transition:all  2s;
}
.effect2{
transform: translateX(250px);
transition:all  2s;
}
.effect3{
transform: translateX(375px);
transition:all  2s;
}
.effect4{
transform: translateX(500px);
transition:all  2s;
}
.piceffect{
transform: translateX(600px) scale(1.5);
transition: all 2s;
}

js代码如下：

var nav2 = document.getElementById('nav2');
var pic = document.getElementById('pic');
nav2.addEventListener("click",move,false);
function move(event){
var event=event||window.event;
var target=event.target||event.srcElement;;
switch(target.id){
case "id11":
line1.className = "effect0";
pic.className = "effect0";
break;
case "id21":
line1.className = "effect";
pic.className = "effect";
break;
case "id31":
line1.className = "effect2";
pic.className = "effect2";
break;
case "id41":
line1.className = "effect3";
pic.className = "effect3";
break;
case "id51":
line1.className = "effect4";
pic.className = "effect4";
break;
}
}
pic.addEventListener("click",showbig,false);
function showbig(){
pic.className="piceffect";
}

效果图：
当鼠标没有点击标签时，横线默认是在第一个标签下，如图：



当点击任何一个标签，下划线和图片就会平滑的过度到点击的那个标签下，如图：