這篇文章將為大家詳細講解有關jQuery如何實現(xiàn)王者榮耀手風琴效果,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
站在用戶的角度思考問題,與客戶深入溝通,找到邯山網(wǎng)站設計與邯山網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:做網(wǎng)站、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋邯山地區(qū)。
效果
思路分析:
1.鼠標經(jīng)過某個小li 有兩步操作:
2.當前小li 寬度變?yōu)?224px, 同時里面的小圖片淡出,大圖片淡入
3.其余兄弟小li寬度變?yōu)?9px, 小圖片淡入, 大圖片淡出
代碼實現(xiàn)略。(詳情參考源代碼)
<!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() { // 鼠標經(jīng)過某個小li 有兩步操作: $(".king li").mouseenter(function() { // 1.當前小li 寬度變?yōu)?nbsp;224px, 同時里面的小圖片淡出,大圖片淡入 // 不能寫成find('.small').stop().fadeOut().siblings().find('.big').stop $(this).stop().animate({ width: 224 }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn(); // 2.其余兄弟小li寬度變?yōu)?9px, 小圖片淡入, 大圖片淡出 $(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" class="small"> <img src="images/m.png" 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" class="small"> <img src="images/l.png" 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" class="small"> <img src="images/c.png" 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" class="small"> <img src="images/w.png" 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" class="small"> <img src="images/z.png" 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/h2.jpg" class="small"> <img src="images/h.png" 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" class="small"> <img src="images/t.png" class="big"> </a> </li> </ul> </div> </body> </html>
jquery是一個簡潔而快速的JavaScript庫,它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發(fā)網(wǎng)站。
關于“jQuery如何實現(xiàn)王者榮耀手風琴效果”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
分享文章:jQuery如何實現(xiàn)王者榮耀手風琴效果
文章地址:http://muchs.cn/article14/piscge.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供微信公眾號、網(wǎng)站導航、品牌網(wǎng)站建設、電子商務、定制網(wǎng)站、建站公司
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)