手风琴特效

一种是鼠标悬浮，一种是点击。

body里

<div style=" 700px; height:300px; background-color:#E7E7E7; overflow:hidden;position:relative;">
    <div id="d1" style="500px; height:300px; background-color:#FF8486;position:absolute; float:left; transition:0.7s;" onMouseOver="bian(1)"></div>
    <div id="d2" style="500px; height:300px; background-color:#FFDE6D;position:absolute; float:left; left:50px; transition:0.7s;" onMouseOver="bian(2)"></div>
    <div id="d3" style="500px; height:300px; background-color:#83FF48;position:absolute; float:left; left:100px; transition:0.7s;" onMouseOver="bian(3)"></div>
    <div id="d4" style="500px; height:300px; background-color:#63EEF5;position:absolute; float:left; left:150px; transition:0.7s;" onMouseOver="bian(4)"></div>
    <div id="d5" style="500px; height:300px; background-color:#776CFF;position:absolute; float:left; left:200px; transition:0.7s;" onMouseOver="bian(5)"></div>
</div>
<br>
<div style=" 700px; height:300px; background-color:#E7E7E7; overflow:hidden;position:relative;">
    <div id="dd1" style="500px; height:300px; background-color:#FF8486;position:absolute; float:left; transition:0.7s;" onClick="biann(1)"></div>
    <div id="dd2" style="500px; height:300px; background-color:#FFDE6D;position:absolute; float:left; left:50px; transition:0.7s;" onClick="biann(2)"></div>
    <div id="dd3" style="500px; height:300px; background-color:#83FF48;position:absolute; float:left; left:100px; transition:0.7s;" onClick="biann(3)"></div>
    <div id="dd4" style="500px; height:300px; background-color:#63EEF5;position:absolute; float:left; left:150px; transition:0.7s;" onClick="biann(4)"></div>
    <div id="dd5" style="500px; height:300px; background-color:#776CFF;position:absolute; float:left; left:200px; transition:0.7s;" onClick="biann(5)"></div>
</div><br>

js里

<script language="javascript1.1">
function bian(n)
{
    if(n==1){
        document.getElementById("d1").style.left="";
        document.getElementById("d2").style.left="500px";
        document.getElementById("d3").style.left="550px";
        document.getElementById("d4").style.left="600px";
        document.getElementById("d5").style.left="650px";
    }
    else if(n==2){
        document.getElementById("d1").style.left="";
        document.getElementById("d2").style.left="50px";
        document.getElementById("d3").style.left="550px";
        document.getElementById("d4").style.left="600px";
        document.getElementById("d5").style.left="650px";
        }
    else if(n==3){
        document.getElementById("d1").style.left="";
        document.getElementById("d2").style.left="50px";
        document.getElementById("d3").style.left="100px";
        document.getElementById("d4").style.left="600px";
        document.getElementById("d5").style.left="650px";
        }
    else if(n==4){
        document.getElementById("d1").style.left="";
        document.getElementById("d2").style.left="50px";
        document.getElementById("d3").style.left="100px";
        document.getElementById("d4").style.left="150px";
        document.getElementById("d5").style.left="650px";
        }
    else if(n==5){
        document.getElementById("d1").style.left="";
        document.getElementById("d2").style.left="50px";
        document.getElementById("d3").style.left="100px";
        document.getElementById("d4").style.left="150px";
        document.getElementById("d5").style.left="200px";
        }
}
function biann(n)
{
    if(n==1){
        document.getElementById("dd1").style.left="";
        document.getElementById("dd2").style.left="500px";
        document.getElementById("dd3").style.left="550px";
        document.getElementById("dd4").style.left="600px";
        document.getElementById("dd5").style.left="650px";
    }
    else if(n==2){
        document.getElementById("dd1").style.left="";
        document.getElementById("dd2").style.left="50px";
        document.getElementById("dd3").style.left="550px";
        document.getElementById("dd4").style.left="600px";
        document.getElementById("dd5").style.left="650px";
        }
    else if(n==3){
        document.getElementById("dd1").style.left="";
        document.getElementById("dd2").style.left="50px";
        document.getElementById("dd3").style.left="100px";
        document.getElementById("dd4").style.left="600px";
        document.getElementById("dd5").style.left="650px";
        }
    else if(n==4){
        document.getElementById("dd1").style.left="";
        document.getElementById("dd2").style.left="50px";
        document.getElementById("dd3").style.left="100px";
        document.getElementById("dd4").style.left="150px";
        document.getElementById("dd5").style.left="650px";
        }
    else if(n==5){
        document.getElementById("dd1").style.left="";
        document.getElementById("dd2").style.left="50px";
        document.getElementById("dd3").style.left="100px";
        document.getElementById("dd4").style.left="150px";
        document.getElementById("dd5").style.left="200px";
        }
}
</script>