准备
htm+lcss布局和样式分析
HTMl是一个容器装着无序列表,li内装着俩图片,一个是小头像图片,另外一个是详情大图片
<div class="box">
<ul>
<li class="current">
<a href="#"><img src="upload/c1.jpg" class="small"><img src="upload/c.png" class="big"></a>
</li>
<li>
<a href="#"><img src="upload/m1.jpg" class="small"><img src="upload/m.png" class="big"></a>
</li>
<li>
<a href="#"><img src="upload/z1.jpg" class="small"><img src="upload/z.png" class="big"></a>
</li>
<li>
<a href="#"><img src="upload/w1.jpg" class="small"><img src="upload/w.png" class="big"></a>
</li>
<li>
<a href="#"><img src="upload/t1.jpg" class="small"><img src="upload/t.png" class="big"></a>
</li>
<li>
<a href="#"><img src="upload/h1.jpg" class="small"><img src="upload/h.png" class="big"></a>
</li>
<li>
<a href="#"><img src="upload/l1.jpg" class="small"><img src="upload/l.png" class="big"></a>
</li>
</ul>
</div>
CSS
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
margin: 100px auto;
width: 50%;
background: url(upload/bg.png) no-repeat;
padding: 10px;
}
.box ul {
overflow: hidden;
}
.box li {
float: left;
position: relative;
width: 69px;
height: 69px;
margin-right: 10px;
}
.box .big {
display: none;
/* position: absolute; */
width: 224px;
top: 0;
}
.box .small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
}
/* 这里权重20 覆盖了上面.box li (权重11)的width属性值 */
.box .current {
width: 224px;
}
.current .big {
display: block;
}
.current .small {
display: none;
}
样式布局大概就是先定义好box的宽度,高度后面由图片撑开,再加上背景图片(不过一开始因为没给高度看不到)
然后再给li添加浮动来一行显示,再给上小头像图片的高度和宽度,同时给ul清除浮动,不然box高度塌陷,无法正常显示背景图片
就像这样:
不过因为大图片和小图片同时出现,就会出现换行的情况
,这里可以将大图片.big类设置display:none
这里给的是li相对定位,大图片没给绝对定位,小图片给绝对定位
最终布局差不多就这样了
然后可以设置第一个li内的大图片显示,小图片隐藏
JS
$(".box li").mouseover(function () {
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().next(".big").stop().fadeIn()
$(this).siblings().stop().animate({
width: 69
}).find(".small").stop().fadeIn().next(".big").stop().fadeOut()
})
jq就是通过每个li的鼠标移入事件来改变li的宽度(变长为大图片的宽度),再给小图片淡出效果,加上大图片的淡入效果
再把li其他兄弟的宽度缩小为原来的宽度(小图片宽度)给小图片淡入效果,加上大图片的淡出效果
最后在动画前面都加上stop方法效果来解决动画队列问题。