jquery - Zara图片放大效果

Question

我正在尝试弄清楚如何实现Zara在其产品中使用的图像放大效果。站点地址:http://www.zara.com/us/en/woman/t-shirts/floral-print-sweatshirt-c269189p1399011.html

当您单击图像时，您将进入一个弹出窗口，其中图像将被拉伸(stretch)以适合整个屏幕。有谁知道类似的jquery插件可以达到类似的效果吗？

谢谢!

Answer 1

非常简单。

我创建了一个小型演示。

演示网址:Demo

HTML 代码

<!-- Gallery -->
<ul>
    <li><a href='#'><img src='1.jpg' width='75px' /></a></li>
    <li><a href='#'><img src='2.jpg' width='75px' /></a></li>
    <li><a href='#'><img src='3.jpg' width='75px' /></a></li>
</ul>

<div>
    <img src='' width='100%' />
</div>

CSS代码

* {
    padding: 0;
    margin : 0;
}
li {
    list-style-type : none;
    float : left;
    margin : 10px;
}
div {
    position : absolute;
    left : 0;
    top : 0;
    bottom : 0;
    right : 0;
    opacity : 0.9;
    display : none;
    overflow : hidden;
}
div img {
    position : absolute;
    top : 0;
    left : 0;
}

JavaScript 代码

$(function() {

    //Clicked on small image
    $('li a').click(function() {
        $('div img').attr('src', $(this).find('img').attr('src'));
        $('div').show();
        return false;
    });

    //When we move mouse on div
    $('div').mousemove(function(e){
        var h = $(this).find('img').height();
        var vptHeight = $(document).height();
        var y = -((h - vptHeight)/vptHeight) * e.pageY;

        $('div img').css('top', y + "px");
    });

    //When we clicked on div
    $('div').click(function(){
        $('div').hide();
    });
});

我做了一些假设。这可以作为概念证明。

请告诉我这是否有帮助。