1.鼠标经过某个小li 有两步操作：
2.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
3.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
代码实现略。(详情参考源代码)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>手风琴案例</title> <style type="text/css"> * { margin: 0; padding: 0; } img { display: block; } ul { list-style: none; } .king { width: 852px; margin: 100px auto; background: url(images/bg.png) no-repeat; overflow: hidden; padding: 10px; } .king ul { overflow: hidden; } .king li { position: relative; float: left; width: 69px; height: 69px; margin-right: 10px; } .king li.current { width: 224px; } .king li.current .big { display: block; } .king li.current .small { display: none; } .big { width: 224px; display: none; } .small { position: absolute; top: 0; left: 0; width: 69px; height: 69px; border-radius: 5px; } </style> </head> <body> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script type="text/javascript"> $(function() { // 鼠标经过某个小li 有两步操作： $(".king li").mouseenter(function() { // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入 // 不能写成find('.small').stop().fadeOut().siblings().find('.big').stop $(this).stop().animate({ width: 224 }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn(); // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出 $(this).siblings("li").stop().animate({ width: 69 }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut(); }) }); </script> <div> <ul> <li> <a href="#" > <img src="https://www.jb51.net/images/m1.jpg" alt=""> <img src="https://www.jb51.net/images/m.png" alt=""> </a> </li> <li> <a href="#" > <img src="https://www.jb51.net/images/l1.jpg" alt=""> <img src="https://www.jb51.net/images/l.png" alt=""> </a> </li> <li> <a href="#" > <img src="https://www.jb51.net/images/c1.jpg" alt=""> <img src="https://www.jb51.net/images/c.png" alt=""> </a> </li> <li> <a href="#" > <img src="https://www.jb51.net/images/w1.jpg" alt=""> <img src="https://www.jb51.net/images/w.png" alt=""> </a> </li> <li> <a href="#" > <img src="https://www.jb51.net/images/z1.jpg" alt=""> <img src="https://www.jb51.net/images/z.png" alt=""> </a> </li> <li> <a href="#" > <img src="https://www.jb51.net/images/h1.jpg" alt=""> <img src="https://www.jb51.net/images/h.png" alt=""> </a> </li> <li> <a href="#" > <img src="https://www.jb51.net/images/t1.jpg" alt=""> <img src="https://www.jb51.net/images/t.png" alt=""> </a> </li> </ul> </div> </body> </html>
以上就是本次介绍的案例代码全部内容，如果大家有不同写法和意见可以联系小编。
您可能感兴趣的文章: