
手風(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
筆沒墨了!!!