手风琴.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
笔没墨了!!!
