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

我採取了一些假設。這起到了概念驗證的作用。

讓我知道這是否有幫助。