JQuery之手风琴

手风琴.gif

(写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.)------Jason Zhang

web开发已现世多年,技术成熟且学习平台广泛,笔者针对其中细节从本质上进行解释.力求透彻.

首先先说一下它的功能:
第一 : 鼠标放上去当前图片放大,其他的变小.
第二 : 加入stop()方法,可以说没有bug.
第三 : 预知详情,请看以下,我站在前方为您导航.

<b>html部分</b>

---

    <div class="wrap">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

---

<b>css部分</b>

---

      * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .wrap {
            width: 1010px;
            margin: 100px auto 0;
        }
        .wrap li {
            width: 200px;
            height: 400px;
            float: left;
        }

---

<b>javaScript+JQuery()</b>

---

<script src="jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
    $('.wrap li').each(function(currIndex,currEle){
        $(currEle).css('background','url(images/'+(currIndex+1)+'.jpg)')
    }).mouseenter(function(){
        $(this).stop().animate({width:600},500).siblings().stop().animate({width:100},500)
    }).mouseleave(function(){
        $('.wrap li').stop().animate({width:200},500)
    });
});
</script>

---

百度JQuery远程网址:http://libs.baidu.com/jquery/2.0.0/jquery.min.js
谷歌JQuery远程网址:http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
笔没墨了!!!