Php 如何将翻滚图像放大到另一个位置？

您好，我想创建一个图像库，其中图像在滚动后重新定位和调整大小。我不确定我是否必须使用javascript或者仅仅是css就足够了。我尝试了jQuery，但无法将每个img与滚动图像匹配。我还想，如果我可以在php脚本中为每个图片指定不同的id，那么之后我可以使用这些id-s来匹配jquery中的滚动图像。下面是一张带说明的图片：

此php脚本生成库：

  function showGallery()
{
$id = 0;
$size ='';
$galleryHTML = "<ul>";
$images = new DirectoryIterator("pildid");

foreach($images as $image) {

$file = $image -> current();
$filename = $file -> getFilename();
$src = "pildid/$filename";
$info = new Finfo( FILEINFO_MIME_TYPE );
$type = $info->file($src);
$galleryhtml = "";  
if($type ==="image/jpeg" )

    $galleryhtml ="<li><img src='$src' id='' height='100px' width='120px'/></li>";
    echo $galleryhtml;


}
 $galleryhtml = "</ul>";
 include_once('view/galerii.php');


}

---

您将需要使用javaScript来完成此任务

下面是一个JSFIDLE，它将向您显示鼠标悬停的图像

---

请详细说明您的问题非常感谢，我尝试了克隆和appendTo方法，但都不起作用。简单明了！

<style>
.preview-image {
    height: 100px;
    width: 100px;
}
#feature-image {
    height: 500px;
    width: 500px;
}
</style>


<div>
    <img class="preview-image" src="http://i1.cdnds.net/13/24/618x497/gaming-pokemon-x-and-y-artwork-3.jpg">
    <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/G/01/videogames/detail-page/pokemon.blk-wte.oshawatt.lg.jpg">
</div>
<div>
    <img id="feature-image">
</div>

<script>
$('.preview-image').on('mouseover', function (e) {
    var featureSource = e.target.src;
    //possibly transform the link here
    //your preview images should be lower quality
    //and the big image should be higher quality
    $('#feature-image').attr('src', featureSource);
});
</script>