Question

Instagram和Twitter有这个东西，当点击图像，图像放大，几乎变成一个z角，而背景是灰色的，如果背景是，z-index？我想知道的是，我该怎么做？我想点击缩略图，放大图片并将所有内容放在背景中，好像它不是焦点一样。（src中的图像不是真实图像，只是一个例子。）

<div id = "queryimages" onclick = "myImage()">

<img src = "picture.gif" alt = "picture">
<img src = "picture.gif" alt = "picture">
<img src = "picture.gif" alt = "picture">
<img src = "picture.gif" alt = "picture">

</div>

<script>
function myImage(){
var getPic = document.queryselectorAll("#queryimages");
var i;
for(i = 0; i < getPic.length;i++){
  if(getPic){
    getPic[i].style.width = "400px";
    getPic[i].style.width = "300px";
    getPic[i].style.position = "absolute";
    getPic[i].style.top = "screen.height / 2";
    getPic[i].style.left = "0px";
    getPic[i].style.right = "0px";
    document.body.style.backgroundColor = "grey";
   }
 }
}
</script>

Answer 1

他们使用插件。

以下是我使用的两个：

灯箱 - http://www.lokeshdhakar.com/projects/lightbox2/#examples

Slimbox - http://www.digitalia.be/software/slimbox/demo/

点击它后如何让图像成为焦点？

1 个答案: