Question

我目前有一个很好用的脚本。

单击图像时，缩放功能起作用。

但我需要创建一个单独的缩放链接。

任何建议。

    jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

$(document).ready(function() {      
    $("#profile_pict_lifesign img").click(function(e){

        $("#background1").css({"opacity" : "0.7"})
                        .fadeIn("slow");            

        $("#large1").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
                   .center()
                   .fadeIn("slow");         

        return false;
    });

    $(document).keypress(function(e){
        if(e.keyCode==27){
            $("#background1").fadeOut("slow");
            $("#large1").fadeOut("slow");
        }
    });

    $("#background1").click(function(){
        $("#background1").fadeOut("slow");
        $("#large1").fadeOut("slow");
    });

    $("#large1").click(function(){
        $("#background1").fadeOut("slow");
        $("#large1").fadeOut("slow");
    });

});




<div id="profile_pict_lifesign"><img src="pic_memory.jpg" alt="" rel=""><a href="pic_memory.jpg">zoom</a>


                    <div id="profile_specs_wrap">
                            <div id="profile_specs_1">LIFESIGN #203</div>
                            <div id="profile_specs_2">Louis Tharp</div>
                            <div id="profile_specs_3">Born:&nbsp;&nbsp;September 20, 1964</div>
                            <div id="profile_specs_4">Home City & State:&nbsp;&nbsp;Indianapolis, Indiana</div>
                            <div id="profile_specs_5">Homeless Status:&nbsp;&nbsp;"Still Homeless"</div>
                            <div id="profile_specs_6">Homeless  Timer:&nbsp;&nbsp;4 Years, 3 Months, & 4 Days</div>
                    </div>

                    <div id="profile_specs_wrap2">
                    <div id="profile_specs_7">This is a photograph of Louis with his two loving sisters in 1969.</div>

                    </div>

                </div>


                    <div id="large1"></div>
                    <div id="background1"></div>

Answer 1

尝试（此模式）

$(function () {
    $("img")
    .on("click", function (e) {
        var data = ["<img class=zoom />"];
        $.when(data)
        .done(function (data) {
            var center = function () {
                this.css("position", "absolute");
                this.css("top", ($(window).height() - this.height()) / 2 
                         + $(window).scrollTop() + "px");
                this.css("left", ($(window).width() - this.width()) / 2 
                         + $(window).scrollLeft() + "px");
                return this;
            };
            if ($(data[0]).is(".zoom")) {
                setTimeout(function () {
                    var z = window.open("", "z");
                    z.center = center;
                    z.document.write(data[0]);
                    z.document.write("<style>" + $("style").text() + "</style>");
                    z.document.write("<scr" 
                     + "ipt>"
                     + "(function() { var script=document.createElement('script');" 
                     + " script.src = 'http://code.jquery.com/jquery-1.11.1.min.js';"
                     + "var head = document.getElementsByTagName('head')[0];" 
                     + "head.appendChild(script)})()</scr" 
                     + "ipt>");
                    // do stuff in new window
                    z.document.write("<scr" 
                      + "ipt>(function()" 
                      + "{ setTimeout(function() {" 
                      + "if (window.jQuery) {" 
                      + " jQuery.fn.center = window.center;" 
                      + "jQuery('.zoom').center()}},50)}())</scr" 
                      + "ipt>");
                }, 250);
            };
        });
    });
});

jsfiddle http://jsfiddle.net/guest271314/aBDRD/

如何制作链接缩放图片

1 个答案: