这篇文章主要介绍了jquery怎样实现百叶窗效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联建站专注于蛟河企业网站建设,响应式网站设计,商城开发。蛟河网站建设公司,为蛟河等地区提供建站服务。全流程按需搭建网站，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

最开始看效果的时候觉得好复杂，以为是宽度的变化写的动画，但是后来细想，如果是宽度变化，那么图片变窄的时候肯定会失真了，后来经过学习，发现原来原理很简单：

基本原理就是，将图片都绝对定位到盒子里，然后分别定位，平分整个盒子，图片就会显示一种层叠效果了（本案例是通过left值控制位置）；然后通过jq控制，当鼠标经过某张图片的时候这张图片完全显示（即left值进行变化），其他图片的left值也进行相应的改变。

文字描述起来很难懂的样子，先上html和css布局效果

  div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto;}img{ border: none; display: block; position: absolute; top: 0;}img:nth-of-type(1){ left: 0;}img:nth-of-type(2){ left: 84px;}img:nth-of-type(3){ left: 168px;}img:nth-of-type(4){ left: 252px;}img:nth-of-type(5){ left: 336px;}