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