Question

我想弄清楚如何实现Zara用于其产品的图像放大效果。网站地址：http://www.zara.com/us/en/woman/t-shirts/floral-print-sweatshirt-c269189p1399011.html

当您单击图像时，它会转到弹出窗口，其中图像被拉伸以适合整个屏幕。有没有人知道类似的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();
    });
});

我做了一些假设。这是一个概念证明。

如果有帮助，请告诉我。

Zara图像放大效果

1 个答案: