Question

我正在使用PHP，JS，CSS创建图片库。以下是我的JavaScript代码，用于显示缩略图和放大图像。通过此代码，我可以通过单击鼠标放大图像并缩小单击大图像。没关系。但是，我想再添加一件事。也就是说：通过在页面中的任意位置单击鼠标，以及通过键盘上的esc键，将缩小图像。下面是我的Javascript代码：

//complete code listing for lightbox.js
window.console.log("Hello from Lightbox Javascript");

// function to initialize lightbox object
function init()
{
    var lightboxElemnts = "<div id ='lightbox'>" +
        "<div id ='overlay' class='hidden'></div>" +
        "<img id='big-image' class='hidden' />" +
        "</div>";
    document.querySelector("body").innerHTML += lightboxElemnts;
    //new code: register toggle as event handler
    var bigImage = document.querySelector("#big-image")
    bigImage.addEventListener("click",toggle, false);
//end of changes
    prepareThumbs();
}

function toggle(event)
{
    var clickedImage = event.target; //get which image is clicked
    var overlay = document.querySelector("#overlay");
    var bigImage = document.querySelector("#big-image");
    bigImage.src = clickedImage.src;
    //if the overlay is hidden, we can assume bigImage is also hidden
    if(overlay.getAttribute("class") === "hidden")
    {
        overlay.setAttribute("class", "showing");
        bigImage.setAttribute("class", "showing");
    }
    else
    {
        overlay.setAttribute("class", "hidden");
        bigImage.setAttribute("class", "hidden");
    }

}

function prepareThumbs()
{
    var liElements = document.querySelectorAll("ul#images li");
    var i=0;
    var image,li;
    while(liElements.length)
    {
        li = liElements[i]; //iterating through every li item
        li.setAttribute("class", "lightbox");  // setting class attribute to 'lightbox' to every li element
        image = li.querySelector("img");    //selecting li elements of images
        image.addEventListener("click", toggle, false);
        i++;
    }
}

document.addEventListener("DOMContentLoaded", init, false);

我已经尝试了Google的几个keycode函数，但是还没有实现。我是Java语言的新手，请帮助我。预先感谢。

Javascript-如何缩小点击的图片

0 个答案: