如何通过翻转将图像放大到另一个位置？

Question

您好，我想创建一个图像库，在翻转后重新定位图像并调整其大小。我不确定我是否必须使用 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');


}

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>