<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>三角形图标的特殊做法</title> <script src="js/jquery.js" type="text/javascript"></script> <style type="text/css"> .moveBox { position: absolute; float: left; top: 35px; width: 60px; height: 10px; } .moveLine { position: relative; float: left; background-color: #f60; height: 2px; width: 60px; } .moveTriangle { font: 0/0 "宋体"; border: 4px solid; border-color: #fff #fff #f60 #fff; float: left; margin : 0 auto; left: 27px; position: relative; } .btnContainer { position: relative; float: left; margin-top: 20px; } .navContainer { width: 1000px; height: 50px; position: relative; float: left; color: #666; } .nav { position: relative; float: left; height: 40px; width: 100%; } .nav ul { width: 100%; height: 100%; } .nav ul li { position: relative; float: left; width: 60px; margin: 0px 0px 0px 20px; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".nav ul li").click(function(){ var ss=$(this).position().left; $(".moveBox").animate({left:ss},500); }); }); </script> </head> <body> <div class="navContainer"> <div class="nav"> <ul> <li>数码</li><li>数码</li><li>数码</li><li>数码</li><li>数码</li></ul> </div> <div class="moveBox"> <div class="moveTriangle"> </div> <div class="moveLine"> </div> </div> </div> <div class="btnContainer"> <button id="btn" type="button"> 移动</button></div> </body> </html>