小代码，这算不算手风琴效果？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style media="all" type="text/css">body, div, form, img, ul, ol, li, dl, dt, dd, p { margin: 0; padding: 0; border: 0; }ul, ol { list-style-type:none; }p { margin:50px; font-size:14px; }.list { height:272px; width:240px; margin:0 auto; border:1px solid #ebebeb; border-bottom:none; overflow:hidden; }.list li { height:29px; *height:27px;padding-left:1em; background: url(http://www.dtonecn.com/test/images/arrow2.gif) no-repeat 1em center; text-indent:1em; border-bottom:1px solid #ebebeb; line-height:26px; font-size:12px; overflow:hidden; }.list li.hi_pic { height:121px; padding:0; margin:0; overflow:hidden; *margin-top:-6px;}.list li.hi_pic img { display:block; height:121px; width:240px; }.list li span { color:#454545; display:block; background:url(http://www.dtonecn.com/test/images/arrow1.gif) no-repeat right center; margin-right:12px; cursor:pointer; }.list li span.hover_arrow { background:url(http://www.dtonecn.com/test/images/arrow3.gif) no-repeat right center; }</style></head><body><ul class="list"><li><spanclass="hover_arrow">红花逝，古亭寞</span> </li><li class="hi_pic" ><img src="http://www.dtonecn.com/test/images/7.gif"/></li><li><span>青酒残，迷梦落</span> </li><li class="hi_pic" style="display:none;"><img src="http://www.dtonecn.com/test/images/8.gif"/></li><li><span>柳雾散，西风破</span> </li><li class="hi_pic" style="display:none;"><img src="http://www.dtonecn.com/test/images/7.gif"/></li><li><span>少年空白头，</span> </li><li class="hi_pic" style="display:none;" ><img src="http://www.dtonecn.com/test/images/8.gif"/></li><li><span>奈何奈何？</span> </li><li class="hi_pic" style="display:none;" ><img src="http://www.dtonecn.com/test/images/7.gif"/></li></ul></body><script type="text/javascript" src="http://www.dtonecn.com/test/js/jquery-1.4.2.min.js" language="javascript"></script><script type="text/javascript"language="javascript">$(".list span").mouseover(function() { if ($(this).attr("class") != "hover_arrow") { $(".hi_pic:visible").hide(); $("span.hover_arrow").removeClass("hover_arrow"); $(this).attr("class", "hover_arrow"); $(this).parent().next().fadeIn(); } });</script></html>
页:
[1]