3.百度新聞導航條效果 · 程序員開發筆記

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #menu{ width: 100%; height: 40px; background: #01204F; margin-top: 50px; } #menu .center{ width: 984px; height: 40px; border-left: 2px solid yellow; border-right: 2px solid yellow; margin: 0 auto; position: relative; overflow: hidden; } #menu .center a{ display: block; float: left; line-height: 40px; color: white; font-weight: 700; text-align: center; text-decoration: none; font-size: 14px; width: 45px; position: relative; z-index: 2; } #menu .center .box{ width: 45px; height: 40px; background: #CC0000; position: absolute; left: -45px; top: 0; } </style> </head> <body> <div id="menu"> <div class="center"> <a href="">國內</a> <a href="">國際</a> <a href="">軍事</a> <a href="">財經</a> <a href="">娛樂</a> <a href="">體育</a> <a href="">互聯</a> <a href="">科技</a> <a href="">游戲</a> <a href="">女人</a> <a href="">汽車</a> <a href="">房產</a> <a href="">推薦</a> <div class="box"></div> </div> </div> <script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#menu .center a").mouseenter(function(){ //獲得移入的a標簽的序號 var c = $(this).index(); //計算left值 var l = 45*c; //讓紅色塊劃過去 $("#menu .box").stop().animate({'left':l},300); }) $("#menu .center").mouseleave(function(){ $("#menu .box").animate({'left':-45},300); }) </script> </body> </html>