事件

首先创建盒子和图片

 <div  style="height: 300px;"></div>
    <div  class="imgs" >
        <div id="oodiv" class="imgs" style="width: 200px ">
            <img id="imgg1" style="width: 200px; height: 160px " src="img/1.jpg"/>  //事先在盒子中存一张图片
        </div>
    </div>

<img id="imgg2" style="width: 200px;border:1px solid red; height: 157px;position: absolute;left: 0px;top: 0px " src="img/2.jpg" />
        <img id="imgg3" style="width: 200px;border:1px solid red; height: 157px;position: absolute;left: 205px;top: 0px " src="img/3.jpg"/>
        <img id="imgg4" style="width: 200px;border:1px solid red; height: 157px;position: absolute;left: 410px;top: 0px " src="img/4.jpg"/>
        <img id="imgg5" style="width: 200px;border:1px solid red; height: 157px;position: absolute;left: 615px;top: 0px  " src="img/5.jpg"/>

再写样式

  *{
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
       .imgs{
          margin: 0px auto;
          text-align: center;
       }

        .imgSty{

            transition:all 2s;
        }

最后是在JS中写效果

function $(oId){  //可以用$代替document.getElementById
  return document.getElementById(oId);
}
window.onload = function(){
  var oDiv = $("oodiv");
  var leftLoc = oDiv.offsetLeft;  // offsetLeft 获取元素居左边父容器的位置
  var topLoc = oDiv.offsetTop+oOdiv.scrollHeight; //scrollHeight 网页正文全文高
  var i = 2; //设一个变量值为2

   oDiv.onclick = function(){
        var oImg = $("imgg"+i);
         if(i==2){
               oImgg.className+="imgSty";
               oImgg.style.left = leftLoc+'px';
               oImgg.style.top = topLoc+'px';
          }
          if(i==3){
                    oImgg.className+="imgSty";
                    oImgg.style.left = (leftLoc-205)+'px'
                    oImgg.style.top = (topLoc-165)+'px';
                }
          if(i==4){
                    oImgg.className+="imgSty";
                    oImgg.style.left = (leftLoc)+'px'
                    oImgg.style.top = (topLoc-325)+'px';
                }
          if(i==5){
                    oImgg.className+="imgSty";
                    oImgg.style.left = (leftLoc+202)+'px'
                    oImgg.style.top = (topLoc-165)+'px';
           }
                i++;
    }

}