js实现标签下划线平移-创新互联-成都快上网建站
js实现标签下划线平移-创新互联
一.使用js实现导航行栏，点击时，下划线会跟着鼠标的点击移动。
成都创新互联是一家专业提供
双滦企业网站建设,专注与成都做网站、成都网站制作、
H5响应式网站、小程序制作等业务。10年已为双滦众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
html代码如下：
2
3
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代码如下：
效果图：
默认时，红色横线在1标签处，点击2时，红色标签，会根据移动函数进行移动，如图（2）
二.在此基础上，根据css3来实现横线的过度平滑效果。
html代码如下：
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";
}效果图：
当鼠标没有点击标签时，横线默认是在第一个标签下，如图：
当点击任何一个标签，下划线和图片就会平滑的过度到点击的那个标签下，如图：
创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。
分享文章：js实现标签下划线平移-创新互联
转载源于：http://kswjz.com/article/ccgjgo.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
