怎么用js实现点击页面上的div慢慢放大，再次点击慢慢缩小。在同一个div

JavaScript012

怎么用js实现点击页面上的div慢慢放大，再次点击慢慢缩小。在同一个div,第1张

用jq 可以轻松实现 下面的代码是 移位 +放大, 再次点击时的代码自己加

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script> 

$(document).ready(function(){

  $("div").click(function(){

    $("div").animate({

      left:'250px',

      opacity:'0.5',

      height:'150px',

      width:'150px'

    })

  })

})

</script>

实现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 />

</div>

<br />

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

</body>

</html>