jQuery實現王者榮耀手風琴效果
阿新 • • 發佈:2020-01-18
效果
思路分析:
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="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 class="king"> <ul> <li class="current"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="images/m1.jpg" alt="" class="small"> <img src="images/m.png" alt="" class="big"> </a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="images/l1.jpg" alt="" class="small"> <img src="images/l.png" alt="" class="big"> </a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="images/c1.jpg" alt="" class="small"> <img src="images/c.png" alt="" class="big"> </a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="images/w1.jpg" alt="" class="small"> <img src="images/w.png" alt="" class="big"> </a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="images/z1.jpg" alt="" class="small"> <img src="images/z.png" alt="" class="big"> </a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="images/h1.jpg" alt="" class="small"> <img src="images/h.png" alt="" class="big"> </a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="images/t1.jpg" alt="" class="small"> <img src="images/t.png" alt="" class="big"> </a> </li> </ul> </div> </body> </html>
以上就是本次介紹的案例程式碼全部內容,如果大家有不同寫法和意見可以聯絡小編。