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

Question

单击本网站图片上的缩略图时:http://www.grouprecipes.com/138587/banana-oatmeal-chocolate-chip-cookies.html ，它会展开并加载图像的原始(全尺寸)版本。

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

有人愿意帮我弄清楚我应该使用什么技术吗？ CSS3 和一些 .animate() 的组合？

Answer 1

这是一个使用 CSS3 和一些 JavaScript 的简单示例。

解释:

• 最初使用绝对定位将图片的缩略图和放大版放置在同一空间。
• 在单击缩略图之前不会加载放大版本，因为放大的 img 标签没有任何 src 开头。通过JS动态赋值。
• 使用 translateX 和 translateY 选项将图像移动到不同的位置，这些选项将图像的绝对定位放大版本移动到提到的编号。 X 轴和 Y 轴上的像素数。
• JavaScript用于给放大后的图片添加一个show类触发转场效果，同时设置img标签的src更新/更大的图像。
• 点击放大图的任意位置，放大图会回到原来的位置。
• 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)预加载图像(如果需要放大版本)的好文章。