需要实现的效果是:当鼠标移动到任意小图的时候,展开对应完整的大图片,其余图片收缩变成小图。
动图展示效果:
搭建结构的时候,首先需要两张图片,一张大图,一张小图,小图使用固定定位放在大图的上面,js需要做的是鼠标经过某个小li 有两步的操作,第一步:当前小li宽度变为400px,同时里面的小图片淡出,大图片淡入;第二步:其余兄弟小li宽度变成60px,小图片淡入,大图片淡出,这里的400和60分别是大图和小图自身的宽度。如果只有一张图的情况下,可以给li设置over overflow: hidden;
html结构:
<div class="box">
<ul>
<li class="current">
<a href="#">
<img src="images/1-1.jpg" alt="" class="small">
<img src="images/1.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/2-2.jpg" alt="" class="small">
<img src="images/2.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/3-3.jpg" alt="" class="small">
<img src="images/3.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/4-4.jpg" alt="" class="small">
<img src="images/4.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/5-5.jpg" alt="" class="small">
<img src="images/5.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/6-6.jpg" alt="" class="small">
<img src="images/6.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/7-7.jpg" alt="" class="small">
<img src="images/7.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/8-8.jpg" alt="" class="small">
<img src="images/8.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/9-9.jpg" alt="" class="small">
<img src="images/9.jpg" alt="" class="big">
</a>
</li>
</ul>
</div>
css样式:
<style>
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.box {
width: 950px;
margin: 10px auto;
overflow: hidden;
padding: 10px;
}
.box ul {
overflow: hidden;
}
.box li {
position: relative;
float: left;
width: 60px;
height: 600px;
margin-right: 5px;
}
.box li.current {
width: 400px;
}
.box li.current .big {
display: block;
}
.box li.current .small {
display: none;
}
.big {
width: 400px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 600px;
border-radius: 5px;
}
</style>
js代码:
//引入js样式,这个可以去官网下载复制到一个新建的js文件里面再引用,jQuery的官网地址: https://jquery.com/
<script src="jquery.min.js"></script>
<script>
$(function() {
//鼠标经过某个小li 有两步操作:
$(".box li").mouseenter(function() {
//1、当前小li宽度变为400px,同时里面的小图片淡出,大图片淡入
$(this).stop().animate({
width: 400
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
//2、其余兄弟小li宽度变成60px,小图片淡入,大图片淡出
$(this).siblings("li").stop().animate({
width: 60
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
点赞收藏回去慢慢学习
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/6269.html