<!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>
