|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义动画</title>
<style>
#test{ min-height:50px; height:50px; width:100px; position:absolute; left:0px; top:200px; background-color:#99FF99; border:2px #666666 solid}
</style>
<script src="../jQuery js/jquery-1.3.2.js"></script>
<script>
$(function(){
$("#s1").click(function(){
$("#show1").animate({left:"450px",height:"128px",width:"128px"},500);
$("#show2").animate({left:"920px",height:"40px",width:"40px"},500);
$("#show3").animate({left:"960px",height:"40px",width:"40px"},500);
});
$("#s2").click(function(){
$("#show1").animate({left:"0px",height:"40px",width:"40px"},500);
$("#show2").animate({left:"450px",height:"128px",width:"128px"},500);
$("#show3").animate({left:"960px",height:"40px",width:"40px"},500);
});
$("#s3").click(function(){
$("#show1").animate({left:"0px",height:"40px",width:"40px"},500);
$("#show2").animate({left:"40px",height:"40px",width:"40px"},500);
$("#show3").animate({left:"450px",height:"128px",width:"128px"},500);
});
})
</script>
<style>
body{ margin:0px; height:100%; width:100%}
.images{ width:128px; height:40px; margin:auto; padding-top:200px;}
img{ width:32px; height:32px;}
#show1{ width:40px; height:40px; position:absolute; left:0px; top:0px; z-index:10}
#show2{ width:40px; height:40px; position:absolute; left:40px; top:0px; z-index:21}
#show3{ width:40px; height:40px; position:absolute; left:80px; top:0px; z-index:22}
</style>
</head>
<body>
<img id="show1" src="../images/25.png"/><img id="show2" src="../images/32.png"/><img id="show3" src="../images/34.png"/>
<div class="images">
<img id="s1" src="../images/25.png" /><img id="s2" src="../images/32.png" /><img id="s3" src="../images/34.png" />
</div>
</body>
</html>
|
