jQuery div层的放大与缩小简单实现代码

复制代码 代码如下:

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

  <head runat="server">

  <title></title>

  <style type="text/css">

  .content

  {

  border: 1px solid #ccc;

  width: 440px;

  overflow: hidden;

  margin: 10px;

  }

  </style>

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

  <script type="text/javascript">

  $(document).ready(function() {

  if ($('#content').height() > 400)

  $('#content').height(400);

  $('#bigger').toggle(function() {

  $('#content').height($('#content').height() + 100);

  $('#bigger').html('缩小');

  }, function() {

  $('#content').height($('#content').height() - 100);

  $('#bigger').html('放大');

  })

  });

  </script>

  </head>

  <body>

  <div id="content" class="content">

  內容1<br />

  內容2<br />

  內容3<br />

  內容4<br />

  內容5<br />

  內容6<br />

  內容7<br />

  內容8<br />

  內容9<br />

  內容10<br />

  內容11<br />

  內容12<br />

  內容13<br />

  內容14<br />

  內容15<br />

  內容16<br />

  內容17<br />

  內容18<br />

  內容19<br />

  內容20<br />

  內容21<br />

  內容22<br />

  內容23<br />

  內容24<br />

  內容25<br />

  </div>

  <br />

  <span id="bigger">放大</span>

  </body>

  </html>