html百叶窗效果,前端jQuery实现百叶窗效果

/p>

img {

margin: 0;

padding: 0;

}

#content {

width: 1084px;

height: 525px;

margin: 20px auto;

position: relative;

overflow: hidden;

}

img {

display: inline;

position: absolute;

}

#i1 {

width: 844px;

height: 525px;

z-index: 400;

}

#i2 {

width: 904px;

height: 525px;

z-index: 300;

}

#i3 {

width: 964px;

height: 525px;

z-index: 200;

}

#q1 {

left: 844px;

z-index: 400;

}

#q2 {

left: 904px;

z-index: 400;

}

#q3 {

left: 964px;

z-index: 400;

}

#q4 {

left: 1024px;

z-index: 400;

}

#q1,

#q2,

#q3 {

filter: alpha(opacity=50);

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

#q1,

#q2,

#q3,

#q4 {

cursor: pointer;

]

}

$(document).ready(function () {

$(“#q4”).click(function () {

$(“#q1”).stop(true, true).animate({ left: “0” }, 400);

$(“#q2”).stop(true, true).animate({ left: “60px” }, 400);

$(“#q3”).stop(true, true).animate({ left: “120px” }, 400);

//$(“#small img:lt($num)”).animate({left:”-844px”},1000);

$(“#i1,#i2,#i3”).stop(true, true).animate({ left: “-844px” }, 400);

});

$(“#q1”).click(function () {

var $num3 = parseInt($(“#q3”).

var $num2 = parseInt($(“#q2”).

var $num1 = parseInt($(“#q1”).

if ($num1 < 844) {

if ($num3 < 964 && $num2 < 904) {

$(“#q1”).stop(true, true).animate({ left: “844” }, 400);

$(“#q2”).stop(true, true).animate({ left: “904px” }, 400);

$(“#q3”).stop(true, true).animate({ left: “964px” }, 400);

$(“#i1,#i2,#i3”).stop(true).animate({ left: “0” }, 400);

}

if ($num3 >= 964 && $num2 < 904) {

$(“#q1”).stop(true, true).animate({ left: “844” }, 400);

$(“#q2”).stop(true, true).animate({ left: “904px” }, 400);

$(“#i1,#i2”).stop(true, true).animate({ left: “0” }, 400);

}

if ($num3 >= 964 && $num2 >= 904) {

$(“#q1”).stop(true, true).animate({ left: “844” }, 400);

$(“#i1”).stop(true, true).animate({ left: “0” }, 400);

}

} else {

$(“#q1”).stop(true, true).animate({ left: “0” }, 400);

$(“#i1”).stop(true, true).animate({ left: “-844” }, 400);

}

});

$(“#q2”).click(function () {

var $num3 = parseInt($(“#q3”).

var $num2 = parseInt($(“#q2”).

if ($num2 < 904) {

if ($num3 < 964) {

$(“#q2”).stop(true, true).animate({ left: “904px” }, 400);

$(“#q3”).stop(true, true).animate({ left: “964px” }, 400);

$(“#i2,#i3”).stop(true, true).animate({ left: “0” }, 400);

} else {

$(“#q2”).stop(true, true).animate({ left: “904px” }, 400);

$(“#i2”).stop(true, true).animate({ left: “0” }, 400);

}

} else {

$(“#q1”).stop(true, true).animate({ left: “0” }, 400);

//$(“#small img:lt($num)”).animate({left:”-844px”},1000);

$(“#i1”).stop(true, true).animate({ left: “-844px” }, 400);

}

});

$(“#q3”).click(function () {

var $num3 = parseInt($(“#q3”).css(“left”));

if ($num3 < 964) {

$(“#q3”).stop(true, true).animate({ left: “964px” }, 400);

$(“#i3”).stop(true).animate({ left: “0” }, 400);

} else {

$(“#q1”).stop(true, true).animate({ left: “0px” }, 400);

$(“#q2”).stop(true, true).animate({ left: “60px” }, 400);

$(“#i1,#i2”).stop(true, true).animate({ left: “-844” }, 400);

}

});

})