html:
<link rel="stylesheet" href="./css/sfq.css">
<script type="text/javascript" src="./js/sfq.js"></script>
<div id="sfqdiv" class="sfqdiv">
<div id="div1" class="sfq"></div>
<div id="div2" class="sfq"></div>
<div id="div3" class="sfq"></div>
<div id="div4" class="sfq"></div>
<div id="div5" class="sfq"></div>
</div>
css:
.sfqdiv{
width:1280px;
height:300px;
background-color: #c4c4c4;
position:relative;
margin:0 auto;
overflow: hidden;
}
.sfqdiv .sfq {
width:880px;
height:100%;
position:absolute;
}
.sfqdiv .sfq:nth-of-type(1) {
background: #00a2d4;
left: 0px;
z-index:1;
}
.sfqdiv .sfq:nth-of-type(2) {
background: #930400;
left: 300px;
z-index:2;
}
.sfqdiv .sfq:nth-of-type(3) {
background: #df9f23;
left: 500px;
z-index:3;
}
.sfqdiv .sfq:nth-of-type(4) {
background: #6b6b6b;
left: 780px;
z-index:4;
}
.sfqdiv .sfq:nth-of-type(5) {
background: #1ad417;
left: 1180px;
z-index:5;
}
js:
$(function(){
$("#div1").mouseenter(function(){
$("#div1").animate({left:'0'},200);
$("#div2").animate({left:'880px'},200);
$("#div3").animate({left:'980px'},200);
$("#div4").animate({left:'1080px'},200);
$("#div5").animate({left:'1180px'},200);
});
$("#div2").mouseenter(function(){
$("#div1").animate({left:'0px'},200);
$("#div2").animate({left:'100px'},200);
$("#div3").animate({left:'980px'},200);
$("#div4").animate({left:'1080px'},200);
$("#div5").animate({left:'1180px'},200);
});
$("#div3").mouseenter(function(){
$("#div1").animate({left:'0px'},200);
$("#div2").animate({left:'100px'},200);
$("#div3").animate({left:'200px'},200);
$("#div4").animate({left:'1080px'},200);
$("#div5").animate({left:'1180px'},200);
});
$("#div4").mouseenter(function(){
$("#div1").animate({left:'0px'},200);
$("#div2").animate({left:'100px'},200);
$("#div3").animate({left:'200px'},200);
$("#div4").animate({left:'300px'},200);
$("#div5").animate({left:'1180px'},200);
});
$("#div5").mouseenter(function(){
$("#div1").animate({left:'0px'},200);
$("#div2").animate({left:'100px'},200);
$("#div3").animate({left:'200px'},200);
$("#div4").animate({left:'300px'},200);
$("#div5").animate({left:'400px'},200);
});
$("#sfqdiv").mouseleave(function(){
$("#div1").animate({left:'0px'},200);
$("#div2").animate({left:'300px'},200);
$("#div3").animate({left:'500px'},200);
$("#div4").animate({left:'780px'},200);
$("#div5").animate({left:'1180px'},200);
});
});