Jquery Zara图像放大效果_Jquery_Css_Image_Web_Lightbox

Jquery Zara图像放大效果

jquery css image web

Jquery Zara图像放大效果,jquery,css,image,web,lightbox,Jquery,Css,Image,Web,Lightbox,我试图找出如何实现Zara用于其产品的图像放大效果。网址：当你点击图像时，它会带你进入一个弹出窗口，在那里图像会被拉伸以适应整个屏幕。有人知道类似的jquery插件可以达到类似的效果吗谢谢大家! 这很简单我创建了一个小演示演示URL: HTML代码  <ul> <li><a href='#'><img src='1.jpg' width='75px' /></a></li

我试图找出如何实现Zara用于其产品的图像放大效果。网址：

当你点击图像时，它会带你进入一个弹出窗口，在那里图像会被拉伸以适应整个屏幕。有人知道类似的jquery插件可以达到类似的效果吗

谢谢大家!

这很简单

我创建了一个小演示

演示URL:

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>

* {
    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;
}

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

JavaScript代码

<!-- 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>

* {
    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;
}

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

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

如果有帮助，请告诉我。