手風(fēng)琴.gif

(寫在文前的只言片語(yǔ)、意書情殤)長(zhǎng)歌破曉穿云過(guò),響徹碧霄振九天.)------Jason Zhang

web開發(fā)已現(xiàn)世多年,技術(shù)成熟且學(xué)習(xí)平臺(tái)廣泛,筆者針對(duì)其中細(xì)節(jié)從本質(zhì)上進(jìn)行解釋.力求透徹.

首先先說(shuō)一下它的功能:
第一 : 鼠標(biāo)放上去當(dāng)前圖片放大,其他的變小.
第二 : 加入stop()方法,可以說(shuō)沒有bug.
第三 : 預(yù)知詳情,請(qǐng)看以下,我站在前方為您導(dǎo)航.

<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遠(yuǎn)程網(wǎng)址:http://libs.baidu.com/jquery/2.0.0/jquery.min.js
谷歌JQuery遠(yuǎn)程網(wǎng)址:http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
筆沒墨了!!!