Zara图像放大效果

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

我采取了一些假设。这起到了概念验证的作用。

让我知道这是否有帮助。