网站建设资讯

NEWS

网站建设资讯

jquery实现手风琴效果

手风琴效果
图示:
jquery实现手风琴效果

成都网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。核心团队均拥有互联网行业多年经验,服务众多知名企业客户;涵盖的客户类型包括:假山制作等众多领域,积累了大量丰富的经验,同时也获得了客户的一致赞扬!

html代码:




  • 红玫瑰





  • 白玫瑰





  • 白玫瑰





  • 白玫瑰





  • 白玫瑰




    
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 h4 { font-size: 14px; color: #000; font-weight:100; width: 14px; height: 98px; padding: 40px 18px 0; } #acc ul li h4.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; }

js代码:

当前标题:jquery实现手风琴效果
URL链接:http://cdweb.net/article/igehcj.html