<html> <head> <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet"> <style> body{ margin-top: 30px; } .box { width: 400px; padding: 15px; background-color: #f0f3f9; } .content { height: 0; position: relative; overflow: hidden; -webkit-transition: height 0.6s; -moz-transition: height 0.6s; -o-transition: height 0.6s; transition: height 0.6s; } .content img { position: absolute; bottom: 0; } .block{ margin: 20px 20px 20px 0; width:100px; height:100px; background:blue; transition:background 2s, width 2s; } .block:hover{ width:300px; background:red; } </style> </head> <body> <div class="container"> <div class="block"></div> <a href="javascript:" class="btn btn-primary" id="button">点击展开图片</a> <div id="more" class="content"> <img src="http://i1.hoopchina.com.cn/u/1403/26/425/2709425/3076ecc2.jpg" height="191" /> </div> </div> <script> (function() { var Btn = document.getElementById("button"), More = document.getElementById("more"); var display = false; Btn.onclick = function() { display = !display; More.style.height = display? "192px": "0px" return false; }; })(); </script> </body> </html>
