JS Implementation label underline translation

A. Use JS to implement the navigation row bar, when clicked, the underline will follow the mouse click to move.

The HTML code is as follows:

The CSS code is as follows:
             *{                  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;            }
The 
 JS code is as follows: 
 
<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":                                &nBsp;              avtivelinetop (0);                     break;           case  "Id2":                                avtivelinetop (;     )            break;             case  "ID3":                 avtivelinetop (;        )         break;                     }       }</script> 
：
By default, the red line is at the 1 label, and when you click 2 O'Clock, the red label moves according to the move function, (2)
650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M02/82/3D/wKioL1dPgJHQxs4wAAATvM0gH9Q122.jpg "title=" 1.jpg " alt= "Wkiol1dpgjhqxs4waaatvm0gh9q122.jpg"/>
650) this.width=650; "src=" http://s4.51cto.com/wyfs02/M00/82/3E/wKiom1dPf97Q7mZDAAAP-lXzpgU919.jpg "title=" 2.jpg " alt= "Wkiom1dpf97q7mzdaaap-lxzpgu919.jpg"/>
Two. On this basis, according to the CSS3 to achieve the excessive smoothing effect of the horizontal line.
The HTML code is as follows:
<section>   <ul id= "Nav2" >    <li  class= " Item1 "><a href=" # " id=" Id11 "> Course Learning </a></li>    <li   class= "Item1" ><a href= "#"  id= "Id21" > Course notes </a></li>     <li  class= "Item1" ><a href= "#"  id= "Id31" > Course exercises </a></li>     <li  class= "Item1" ><a href= "#"  id= "id41" > Course related </a></li>     <li  class= "Item1" ><a href= "#"  id= "ID51" > Curriculum Development </a ></li>    </ul>    <div id= "Line1" ></div >   </section>    <div style= "Clear:both;" ></div>  <div id= "pic" >     &nbsP;  </div> 
The 
 CSS code is as follows: 
 
 
        .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{        &nbSp;        transform: translatex (600px)  scale (1.5);                 transition: all  2s;           }
The 
 JS code is as follows: 
 
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;                    }  &Nbsp;        }      pic.addeventlistener ("click", Showbig,false);   function showbig () {    pic.classname= "Piceffect";   }
：
When the mouse does not click the label, the horizontal line by default is the first tab,
650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/82/3D/wKioL1dPgmzhj1qkAACwG1pl53I297.jpg "title=" 1.jpg " alt= "Wkiol1dpgmzhj1qkaacwg1pl53i297.jpg"/> When you click on any one of the labels, the underline and the picture will be smoothed over to the click of the tab,
650) this.width=650; "src=" http://s5.51cto.com/wyfs02/M01/82/3E/wKiom1dPgbCRuHFwAAC0hRLjs1c994.jpg "title=" 2.jpg " alt= "Wkiom1dpgbcruhfwaac0hrljs1c994.jpg"/>
This article is from the "dream need to adhere to" blog, please be sure to keep this source http://xiyin001.blog.51cto.com/9831864/1785361
JS Implementation label underline translation