Javascript 如何让图像在单击时返回到网站上的其他位置

我的另一个问题没有得到正确解释

这是一个演示的“阿尔法”版本，我正试图得到什么。 )

CSS

HTML

你好

当我点击一个元素或图像时，它会将图像移动并放大到

的右侧，同时保持左侧的图像不变。

这里有一个

---

$（函数（）{
$（'hi img'）。单击（函数（）{
如果（$（'.large'）。长度<1）{
$（“#大”）。追加（“”）；
}
否则{
$（'.large'）.attr（'src'，$（this.attr（'src'））；
}
});
});

在提问之前，首先你应该自己尝试一下。我没有线索开始，这就是问题所在。有很多方法可以解决这个问题。你可以使用灯箱效果。你可以创建一个动画。这里有一个简单的小提琴，可以让你开始。只需点击图片。

#container
{
width:960px;
height:500px;
background:#36F;        
}

#imagesn
{
width:200px;
height:500px;
background-color:#666;
position:relative;
overflow:scroll;
}

#hi
{
width:150px;
height:100px;

}

<div id="container">
<div id="imagesn">Hello
<div id="hi"><img src="" width="150px" height="100px" />

</div>

</div>
</div>

<div id="container">
  <div id="imagesn">Hello
    <div id="hi">
      <img src="http://curitibainenglish.com.br/wp-content/uploads/2014/02/Tech-eye.jpg">
      <img src="http://www.onesullivan.com/uploads/defense_tech.jpg">
    </div>
  </div>
  <div id="large"></div>
</div>

#container {
  width: 960px;
  height: 500px;
  background: #36F; 
}
#imagesn {
  width: 200px;
  height: 500px;
  background: #666;
  padding: 5px 0;
  position: relative;
  overflow: scroll;
  color: #fff;
  text-align: center;
}
#hi {
  width: 150px;
  height: 100px;
  margin: 0 auto;
}
#hi img {
  width: 150px;
  height: 100px;
  margin: 5px auto;
  cursor: pointer;
}
#large {
  position: absolute;
  top: 0;
  left: 200px;
  width: 760px;
  height: 500px;
  overflow: hidden;
}

$(function() {
  $('#hi img').click(function() {
    if($('.large').length < 1) {
       $('#large').append('<img src="'+$(this).attr('src')+'" class="large">');
    }
    else {
       $('.large').attr('src',$(this).attr('src'));   
    }
  });
});