明確完成的效果，同時準備好相應的圖片后，應該按照以下三個步驟進行。
1、寫 html。
本案例中，首先有一個大盒子（大盒子背景為圖片，在css樣式中進行書寫），盒子里面裝著幾個樣式相同的小盒子（所以用Ul下面的 li 表示）；然后，小li里面應該裝有兩張圖片（一張大圖片，一張小圖片，小圖片定位到大圖片左邊）；最后，這些圖片都可以點擊，應該是鏈接，所以用鏈接將兩張圖片包裹起來。

<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>

2、寫css，將樣式補充完整

<style>* {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>

3、書寫交互效果，jQ

<!-- 先引入jQ --><script src="js/jquery.min.js"></script><script type="text/javascript">$(function() {// 鼠標經過某個小li 有兩步操作：$(".king li").mouseenter(function() {// 1.當前小li 寬度變為 224px， 同時里面的小圖片淡出，大圖片淡入$(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>

完整代碼見資源，可直接下載使用

總結

以上是生活随笔為你收集整理的王者荣耀手风琴的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。