JQuery 图片的展开和伸缩实例讲解

复制代码 代码如下:

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title></title>

  <style type="text/css">

  #img1

  {

  width:400px;

  height: 400px;

  border: solid 1px #ccc;

  display:none;

  }

  </style>

  <script src="jquery-1.9.1.js" type="text/javascript"></script>

  <script type="text/javascript">

  $(function () {

  $('#Button1').click(function () {

  $('#img1').show(5000); //图片的展开

  })

  $('#Button2').click(function () {

  $('#img1').hide(5000); //图片的伸缩

  })

  })

  </script>

  </head>

  <body>

  <img id="img1" src="images/1.jpg" />

  <input id="Button1" type="button" value="展开图片"/>

  <input id="Button2" type="button" value="收缩图片"/>

  </body>

  </html>