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

Question

嗨，我想创建一个图像库，图像在翻转后会重新定位和调整大小。 我不确定我是否必须使用JavaScript或CSS是否足够。 我尝试使用jQuery，但无法将每个img与翻转的图像进行匹配。 我还认为如果我可以给每个图片在php脚本中使用不同的id，那么以后我可以使用这些id来匹配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');


}

Answer 1

您将需要使用javaScript完成此操作。

这是一个jsFiddle，它将为您显示鼠标悬停的图像。

http://jsfiddle.net/Qtu9N/2/

<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>