图片展示(未简化、美化版)

baiyejianxin

图片展示(未简化、美化版)
!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>
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>


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u3/93876/showart_2038957.html