jquery实现动画部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>动画案例_JQ</title>
<meta charset="utf-8"/>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{
margin:0;
padding:0;
}
#move{
padding:10px;
width:300px;
background:#ccc;
margin:10px auto;
border:1px solid #000;
}
#move a{
display:inline-block;
width:58px;
height:40px;
border:1px solid #ddd;
border-radius:3px;
background-color:#fff;
text-align:center;
margin:10px 17px;
position:relative;
padding-top:40px;
color:#9c9c9c;
font-size:12px;
text-decoration:none;
line-height:25px;
overflow:hidden;
}
#move a i{
position:absolute;
top:20px;
left:0;
display:inline-block;
width:100%;
text-align:center;
filter:alpha(opacity=100);
opacity:1;
}
#move a:hover{
color:#f00;
}
#move img{
border:none;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#move a').mouseenter(function(){
$(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){
//300是速度值，毫秒
$(this).css({top:"30px"});
$(this).animate({top:"20px",opacity:"1"},200)
})
})
})
</script>
</head>
<body>
<div id="move">
<a href=""><i><img src="images/caipiao.png" alt="" /></i><p>彩票</p></a>
<a href=""><i><img src="images/movie.png" alt="" /></i><p>电影</p></a>
<a href=""><i><img src="images/food.png" alt="" /></i><p>外卖</p></a>
<a href=""><i><img src="images/game.png" alt="" /></i><p>游戏</p></a>
<a href=""><i><img src="images/insure.png" alt="" /></i><p>保险</p></a>
<a href=""><i><img src="images/travel.png" alt="" /></i><p>旅行</p></a>
</div>
</body>
</html>
<html>
<head>
<title>动画案例_JQ</title>
<meta charset="utf-8"/>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{
margin:0;
padding:0;
}
#move{
padding:10px;
width:300px;
background:#ccc;
margin:10px auto;
border:1px solid #000;
}
#move a{
display:inline-block;
width:58px;
height:40px;
border:1px solid #ddd;
border-radius:3px;
background-color:#fff;
text-align:center;
margin:10px 17px;
position:relative;
padding-top:40px;
color:#9c9c9c;
font-size:12px;
text-decoration:none;
line-height:25px;
overflow:hidden;
}
#move a i{
position:absolute;
top:20px;
left:0;
display:inline-block;
width:100%;
text-align:center;
filter:alpha(opacity=100);
opacity:1;
}
#move a:hover{
color:#f00;
}
#move img{
border:none;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#move a').mouseenter(function(){
$(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){
//300是速度值，毫秒
$(this).css({top:"30px"});
$(this).animate({top:"20px",opacity:"1"},200)
})
})
})
</script>
</head>
<body>
<div id="move">
<a href=""><i><img src="images/caipiao.png" alt="" /></i><p>彩票</p></a>
<a href=""><i><img src="images/movie.png" alt="" /></i><p>电影</p></a>
<a href=""><i><img src="images/food.png" alt="" /></i><p>外卖</p></a>
<a href=""><i><img src="images/game.png" alt="" /></i><p>游戏</p></a>
<a href=""><i><img src="images/insure.png" alt="" /></i><p>保险</p></a>
<a href=""><i><img src="images/travel.png" alt="" /></i><p>旅行</p></a>
</div>
</body>
</html>