abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery下滑线跟随导航</title> <style> html{font-size: 10px;} body{background-colo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery下滑线跟随导航</title> <style> html{font-size: 10px;} body{background-color: #000;} body,ul{margin: 0;padding: 0;} .clearfix{overflow: hidden;_height:1%;} .wrap{width:100vw;height:100vh;} .topBox{position: absolute;width: 100%;height: 5vh;} .fhNav{position:relative;box-sizing:border-box;width:100%;height:100%;background-color:rgba(103,87,87,.85);padding:0 10px} .nav{width:100%;height:100%;font-size:1.8rem;color:#fff} .nav li{list-style:none;float:left;min-width:5vw;text-align:center;height:5vh;line-height:5vh;cursor:pointer;padding:0 10px} .nav li:hover{background-color:rgba(0,0,0,.9)} .selectedNav{background-color:rgba(0,0,0,.9)} .bottomLine{position:absolute;left:0;bottom:0;height:4px;background-color:#fff;transition:all .3s ease} </style> </head> <body> <div> <div> <div> <div></div> <ul class="nav clearfix"> <li>合肥市</li> <li>马鞍山市</li> <li>芜湖市</li> <li>滁州市</li> <li>宿州市</li> <li>淮北市</li> <li>淮南市</li> <li>黄山市</li> </ul> </div> </div> </div> <script src="/jquery.js"></script> <script type="text/javascript"> $(".fhNav").hover(function() {}, function() { $(".bottomLine").css("width", parseFloat($(".selectedNav").eq(0).width() + 20) + "px"); $(".bottomLine").css("left", parseFloat($(".selectedNav").eq(0)[0].offsetLeft) + "px"); }) $(".nav li").hover(function() { $(".bottomLine").css("width", parseFloat($(this).width() + 20) + "px"); $(".bottomLine").css("left", parseFloat($(this)[0].offsetLeft) + "px"); }); $(".nav li").on("click", function() { $(".nav li").removeClass("selectedNav"); $(this).addClass("selectedNav"); $(".bottomLine").css("width", parseFloat($(this).width() + 20) + "px"); $(".bottomLine").css("left", parseFloat($(this)[0].offsetLeft) + "px"); }) </script> </body> </html>
Correcting teacher:查无此人Correction time:2019-05-14 09:23:02
Teacher's summary:完成的不错。jq比js简单很多,熟悉后可以减少很多工作量。继续加油。