jquery手风琴效果
coder_wb 人气:0用jquery来实现手风琴效果是非常简单的哦,供大家参考,具体内容如下
首先来看看效果
上代码
html
<div id="acc"> <ul> <li class="active"> <h3 class="active">红玫瑰</h3> <div><img src="img/bg1.jpg" /></div> </li> <li> <h3>白玫瑰</h3> <div><img src="img/bg2.jpg" /></div> </li> <li> <h3>白玫瑰</h3> <div><img src="img/bg3.jpg" /></div> </li> <li> <h3>白玫瑰</h3> <div><img src="img/bg4.jpg" /></div> </li> <li class="last"> <h3>白玫瑰</h3> <div><img src="img/bg5.jpg" /></div> </li> </ul> </div>
css代码
<style type="text/css"> * { margin: 0; padding: 0; } img { border: none; display: block; } #acc { width: 640px; height: 140px; margin: 0 auto; } #acc ul { border-left: 1px solid #ddd; height: 140px; position: relative; } #acc ul li { width: 50px; height: 138px; border: 1px solid #ddd; float: left; list-style: none; border-left: 0; position: relative; overflow: hidden; } #acc ul li.active { width: 434px; } #acc ul li h3 { font-size: 14px; color: #000; font-weight: 100; width: 14px; height: 98px; padding: 40px 18px 0; } #acc ul li h3.active { background: #f42760; color: #fff; } #acc ul li div { width: 383px; height: 138px; background: blue; position: absolute; top: 0; left: 50px; border-left: 1px solid #ddd; z-index: 0; } #acc ul li img { width: 383px; height: 138px; } #acc ul li.last { position: absolute; top: 0; right: 0; } </style>
js代码
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { //鼠标移到当前li上,当前li的宽度变成434px,li里的h3要添加一个类名active让背景变红,文字变白 $("#acc") .find("li") .mouseover(function () { $(this) .stop() .animate({ width: "434px" }, 800) .children("h3") .addClass("active") //end()是从h3回到li上去 .end() .siblings() //当前li的所有兄弟li .stop() .animate({ width: "50px" }, 800) .children("h3") .removeClass("active"); }); }); </script>
加载全部内容