Question

这里有一个新问题：你如何做到这一点，当你点击一个图像时，它会扩展（不是整个网站）并以网站为中心，并且有一个透明的背景，可以让你看到你所在的页面？（然后在点击黑色透明区域时返回＆＃34;背景＆＃34;页面）当您点击相册中的图像时，Facebook会发生什么。

我尝试用CSS做这件事因为我无法用JS做到这一点，用这个：

    figcaption {
    font-size: 12px;
    text-align: center;
    display: block;
    background-color: white;
    font-weight: 500;
    }
    figure:hover {
    -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
    }

    figure:focus {
    outline: none;
    -webkit-transform: scale(5); -moz-transform: scale(5);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
    z-index: 9999;
    }

但这仍然不是我想要做的。

小提琴：http://jsfiddle.net/seanh99/ubJLU/

这是我尝试构建的第一个网站，所以我们非常感谢任何提示/更正！

Answer 1

我使用过的工具是Lightbox 2.可以找到它here（如果您不介意使用外部资源）。

Answer 2

您似乎正在尝试为图片创建“灯箱”。最好的选择可能就是使用现有的jQuery插件。

两个例子是：

（http://fancyapps.com/fancybox/）
（http://lokeshdhakar.com/projects/lightbox2/）

您需要在代码中包含jQuery才能使用它们。

如何使图像覆盖网站点击？

2 个答案: