jq实现跟随鼠标点击移动的下划线效果
效果如下：
1.html代码：
1 <div class="center-left-tap"> 2 <a href="javascript:void (0)" style="color: #1c1c1c;" class="current" onclick="mt1()">最新</a> 3 <a href="javascript:void (0)" class="a-hover" onclick="mt2()">B2C</a> 4 <a href="javascript:void (0)" class="a-hover" onclick="mt3()">C2C</a> 5 <a href="javascript:void (0)" class="a-hover" onclick="mt4()">传统零售</a> 6 <a href="javascript:void (0)" class="a-hover" onclick="mt5()">其他</a> 7</div> 8 9 10 11 <!--引入下划线图片文件--> 12<div class="Tab-img"> 13 <img src="img-index/new-highline.png" alt="" id="img"> 14 </div>
2.css代码：
1 .center-left-tap{height: 58px;} 2 .center-left-tap a{font-size: 16px;color: #999;margin-right: 37px;padding-bottom: 19px;} 3 .a-hover:hover{color: #595959;} 4 5 /*下化线*/ 6 .Tab-img{position: relative} 7 #img{position: absolute;top: -20px;left: -7px;width: 9%;transition: all 1s;}
3.js代码：
1 <script> 2 // 选项卡下划线 3 var img = document.getElementById('img'); 4 function mt1(){ 5 img.style.left = '-7px'; 6 } 7 function mt2(){ 8 img.style.left = '50px'; 9 } 10 function mt3(){ 11 img.style.left = '120px'; 12 } 13 function mt4(){ 14 img.style.left = '210px'; 15 } 16 function mt5(){ 17 img.style.left = '300px'; 18 } 19 </script>
应届菜鸟，大神勿喷...
