纯css实现兼容很好的点击看大图实例

2015-10-17 Jon

css点击看大图demo

<br />
  <!DOCTYPE html><br />
  <html lang="en"><br />
  <head><br />
    <meta charset="UTF-8"><br />
    <title>点击看大图</title><br />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> --><br />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui" /><br />
    <style><br />
      .showimg>img{width: 200px;}<br />
      span{display: none;position:fixed; width: 100%;height: 100%;left:0;top:0;z-index:20;opacity: 0}<br />
      .showimg:focus+span{display: block;}<br />
      .showimg:focus:before{position:fixed;content:'';z-index: 10px;left:0;top:0;width: 100%;height: 100%;background-color:rgba(0,0,0,.9);}<br />
      .showimg:focus>img{z-index: 11; width: auto;height:auto;left:0;position: absolute;top:0;right:0;bottom:0;margin:auto;}<br />
    </style><br />
  </head><br />
  <body><br />
    <p>点击查看1</p><br />
    <a href="javascript:;" class="showimg"><img src="http://placehold.it/1000x380" alt=""></a><span></span><br />
    <p>点击查看2</p><br />
    <a href="javascript:;" class="showimg"><img src="http://placehold.it/1000x380" alt=""></a><span></span><br />
  </body><br />
  </html><br />

您可以修改框中代码后运行查看

发表评论：