jquery实现百叶窗效果的教程

时间：2017-01-13 编辑：简简单单来源：一聚教程网

今天试着用jq写了下图片百叶窗效果，就是鼠标经过那张图，那张图显示，其他图片缩小~

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

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

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

代码如下

复制代码

Document

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;

}

布局很简单，接下来就是jq控制各个图片相对位置的变化了。

起始位置：五张图片的 left 值在css已经写好，就是平分了整个盒子的宽度；

鼠标经过时候：经过的那张图片完全显示，即占据宽度280px（图片的宽度是280px），剩余的宽度是（盒子宽度-280px）/剩余的图片数量，根据所得值确定各个图片的终止位置，left值；

感觉自己说的好复杂，先看下鼠标讲过某张图的时候的动画效果：

代码如下

复制代码

Document

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;

}

var lefts;

var idx;

$("img").each(function(){

$(this).mouseenter(function(e) {

idx = $(this).index();

lefts = idx * 35;

//当前图片的变化

$(this).stop(true).animate({"left" : idx * 35}, 1000);

});

})

当前图片能够愉快的玩耍了，接下来的重点就是其余图片怎么运动。

此时，我们可以把剩余的图片分成左右两部分，用jq 的 ":lt()" 和 ":gt()"方法写出剩余部分的效果。这里有一个小小的坑，自己也是绕了半天，最后还是别人提醒的才绕出来。

以当前图片左侧动画效果为例，最开始我是这么写的

代码如下

复制代码

Document

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;

}

var lefts;

var idx;

$("img").each(function(){

$(this).mouseenter(function(e) {

idx = $(this).index();

lefts = idx * 35;

//当前图片的变化

$(this).stop(true).animate({"left" : idx * 35}, 1000);

$(“img:lt( idx )“).each(function(){

$(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)

})

});

})

看上去没有什么错误，见证奇迹~~~奇迹~~迹~~~然而并没有什么奇迹，原因就是 $(“img:lt( idx )“) 这种写法，里面的idx已经不是变量了，所以无法获取当前的 idx 值，我们可以在外面定义一个变量，同时用 + 连接 lt 和变量 idx，再把变量引入进去即可。

因此更改后如下：

代码如下

复制代码

Document

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;

}

var lefts;

var idx;

var imgL;

$("img").each(function(){

$(this).mouseenter(function(e) {

idx = $(this).index();

imgL = "img:lt(" + idx + ")"

lefts = idx * 35;

//当前图片的变化

$(this).stop(true).animate({"left" : idx * 35}, 1000);

$(imgL).each(function(){

$(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)

})

});

})

这样奇迹就出现了~~ 同样的道理，右侧也是同样的方法。

最终代码如下：

代码如下

复制代码

Document

div{

width: 420px;

height: 186px;

border: 2px solid #ccc;

overflow: hidden;

position: relative;

margin: 100px auto;

}

img{

width:280px;

height:186px;

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;

}

//精简之后的方法

var lefts;

var idx;

var imgL;

var imgR;

$("img").each(function(){

$(this).mouseenter(function(e) {

idx = $(this).index();

imgL = "img:lt(" + idx + ")" //获取当前左侧的所有图片，如果直接用 $("img:lt(idx)")，idx会被当做字符串，获取不到对应的值

imgR = "img:gt(" + idx + ")" //获取当前右侧的所有图片

lefts = idx * 35;

//当前图片的变化

$(this).stop(true).animate({"left" : idx * 35}, 1000);

//左侧图片的变化

$(imgL).each(function(){

$(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)

})

//右侧图片的变化

$(imgR).each(function(){

$(this).stop(true).animate({"left" : ($(this).index()+7) * 35}, 1000)

})

});

})

$("img").each(function(){

$(this).mouseleave(function(){

$("img").each(function(){

$(this).stop(true).animate({"left" : ($(this).index())*84}, 1000);

})

});

})

鼠标移出效果，就是恢复到最开始的状态，就不在叙述了。

方法可能不是最简单的方法，说的也可能不甚详尽，希望大神多多指教，我也多多学习~~~

上一个：基于JavaScript实现带缩略图的轮播效果
下一个： jQuery命名空间与闭包用法示例

推荐专题

最新下载

热门教程

jquery实现百叶窗效果的教程

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程