Question

我真的不知道如何才能对此页面上的图片产生同样的效果。就像你会看到的那样，有一个小图像的文章，但当用户点击图像时，它会在整个宽度上放大。有谁知道如何复制这个？

提前致谢！一旦我收到答案，我将要求。删除它，因为我知道它没有显示任何代码或其他任何内容。

链接http://www.klix.ba/sport/nogomet/navijaci-galatasaraya-unistavali-stolice-na-emiratesu/141003042

Answer 1

直接来自该页面的源代码：

$('a.resizeimg').click(function(){
                if (!resized) {
                    $(this).find("figure").hide();
                    $(this).parent().animate({'width':632,'height':470}, 300);
                    $(this).find("img").animate({'width':632,'height':470}, 300, function(){
                        $('a.resizeimg').find("figure").show();
                        var header = parseInt($("header").css("height"));
                        if(header == 92) {
                            clanakHeight = parseInt($('article.clanak').height())+69-parseInt($(".additional").height());
                        }
                        else if(header == 51) {
                            clanakHeight = parseInt($('article.clanak').height())+181-parseInt($(".additional").height());
                        }
                    });
                    $(this).next("p.opis").animate({'width':622}, 300);
                    $(this).find("figure").css({'width':632,'height':470});
                    resized = true;
                }
                else if (resized) {
                    $(this).find("figure").hide();
                    $(this).parent().animate({'width':316,'height':235}, 300);
                    $(this).find("img").animate({'width':316,'height':235}, 300,function(){
                        $('a.resizeimg').find("figure").show();
                        var header = parseInt($("header").css("height"));
                        if(header == 92) {
                            clanakHeight = parseInt($('article.clanak').height())+69-parseInt($(".additional").height());
                        }
                        else if(header == 51) {
                            clanakHeight = parseInt($('article.clanak').height())+181-parseInt($(".additional").height());
                        }
                    });
                    $(this).find("figure").css({'width':316,'height':235});
                    $(this).next("p.opis").animate({'width':306}, 300);
                    resized = false;    
                }

                return false;
            });

Answer 2

不确定

HTML

<img id="myImage" src="http://www.manifestic.com/images/smpanda.jpg">

JQuery的

var resized;
$('#myImage').click(function(){
    if (!resized) {
        $(this).animate({'width':632,'height':470}, 300);
        resized = true;    
    }
    else if (resized) {
        $(this).animate({'width':283,'height':360}, 300);
        resized = false;    
    }

    return false;
});

看看这个JSFIDDLE

用jquery放大图像

2 个答案: