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

<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，將樣式補(bǔ)充完整

<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() {// 鼠標(biāo)經(jīng)過某個(gè)小li 有兩步操作：$(".king li").mouseenter(function() {// 1.當(dāng)前小li 寬度變?yōu)?224px， 同時(shí)里面的小圖片淡出，大圖片淡入$(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>

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。