jquery 王者荣耀手风琴
1)基础原理
//1 鼠标经过某个li有两步操作 //2 当前小li宽度变为224px 同时里面 小图片谈出 大图片淡入 //3 其余兄弟小li宽度变69px 小图片淡出 大图片淡入
2)代码实现
<!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="jquery.min.js"></script> <div class="king"> <ul> <li class="current"> <a href="#"> <img src="images/m1.jpg" alt="" class="small"> <img src="images/m.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/l1.jpg" alt="" class="small"> <img src="images/l.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/c1.jpg" alt="" class="small"> <img src="images/c.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/w1.jpg" alt="" class="small"> <img src="images/w.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/z1.jpg" alt="" class="small"> <img src="images/z.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/h1.jpg" alt="" class="small"> <img src="images/h.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/t1.jpg" alt="" class="small"> <img src="images/t.png" alt="" class="big"> </a> </li> </ul> </div> <script> $(".king li").mouseover(function () { //1 当前小li宽度变为224px 同时里面 小图片谈出 大图片淡入 // $(this).stop().animate({width:244},200); // $(this).find('.small').stop().fadeOut(); // $(this).find('.big').stop().fadeIn(); //链式调用 $(this).stop().animate({width: 224},200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn(); //2 其余兄弟小li宽度变69px 小图片淡入 大图片淡出 // $(this).siblings().stop().animate({width:69},200); // $(this).siblings().find('.small').stop().fadeIn(); // $(this).siblings().find('.big').stop().fadeOut(); //链式调用 $(this).siblings("li").stop().animate({width: 69},200).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut(); }); </script> </body> </html>