Question

点击此网站上图片的缩略图：http://www.grouprecipes.com/138587/banana-oatmeal-chocolate-chip-cookies.html，它会展开并加载图片的原始（完整尺寸）版本。

我认为他们正在使用原型或类似的东西。我一直在这里四处寻找并且only主要是found示例，这些示例只会增加原始图像的大小，并且实际上不会加载另一个版本的图像（就像链接的示例那样）。

任何人都想帮我弄清楚我应该用什么技巧？ CSS3和一些.animate()的组合？

Answer 1

这是一个使用CSS3的简单示例，一点JavaScript。

<强>解释

最初使用absolute定位将图片的缩略图和放大版放在同一个空间。
在点击缩略图之前未加载放大版本，因为放大的img标记没有任何src开头。它是通过JS动态分配的。
使用translateX和translateY选项可以将图像移动到不同的位置，这些选项可以通过上述编号移动图像的绝对放大版本。 X轴和Y轴的像素数。
JavaScript用于向放大的图片添加show类，触发转换效果，并将src标记的img设置为较新/较大的图片。
当放大图像上的任何位置点击时，放大版本将返回其原始位置。
JS代码是使用类名而不是id编写的，以防您在同一页面上需要多个这样的缩略图。如果是这种情况，您可能需要删除[0]，将其置于for循环内，并将[0]替换为计数器变量。此外，每个这样的缩略图图像的放大图像源可以通过键值对映射来维护。
最初图片上的z-index: -1（在通过JS添加.show之前）是为了确保它保留在后台并且不会阻碍缩略图上的点击。

注意事项：

transform，translateX和translateY都是CSS3属性/函数，因此在IE8中没有支持。对于旧版Chrome，Firefox，Opera和Safari，需要使用-webkit-，-moz等浏览器前缀。
classList.add和classList.remove函数是HTML5标准，在IE9中不受支持，但它们等效的IE9代码可以轻松地添加或删除类（如className += ..）。

var images = {'img1': 'http://placehold.it/400/400'};
document.getElementsByClassName('thumbnail')[0].onclick = function(){
    document.getElementById('enlarged').src = images[this.id];
    document.getElementById('zoomed').classList.add('show');
}
document.getElementById('enlarged').onclick = function(event){
    if(event.target != document.getElementsByClassName('thumbnail')[0])
        document.getElementById('zoomed').classList.remove('show');
}

.container{
    position: relative;
}
.thumbnail{
    height: 200px;
    width: 200px;
}
#zoomed .enlarged{
    opacity: 0;
    z-index: -1;
    min-height: 200px;
    min-width: 200px;  
    height: 200px;
    width: 200px;
    position: absolute;
    transition: all 1s;
    left: 0px; top: 0px;
}
#zoomed.show .enlarged{
    opacity: 1;
    z-index: 2;
    height: auto;
    width: auto;
    min-height: 400px;
    min-width: 400px;
    transform: translateX(200px) translateY(200px);
}

<div class="container">
    <img src="http://placehold.it/200/200" alt="" class="thumbnail" id='img1'/>
    <div id='zoomed'>
        <img src="" alt="" class="enlarged" id='enlarged'/>
    </div>
</div>

其他资源：

Here是一篇很好的文章，介绍如何使用CSS + JS预加载图像（如果需要，可以放大版本），只有JS和AJAX。

如何在jQuery / javascript中复制此图像缩放动画效果？

1 个答案: