jquery - Zara image zoom in effect

Question

I am trying to figure out how to achieve the image zoom-in effect which Zara is using for its products. Site address: http://www.zara.com/us/en/woman/t-shirts/floral-print-sweatshirt-c269189p1399011.html

When you click on the image it takes you to a popup window where the image is stretched to fit the whole screen. Does anyone know a similar jquery plugin that could achieve the similar effect?

Thank you!

Answer 1

这很简单。

我创建了一个小演示。

演示网址：演示

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();
    });
});

我做了一些假设。这充当概念证明。

让我知道这是否有帮助。