标签：overlay script block css 图片放大 family example lock one
例子一：
HTML
<a class="show-big-pic" href="大图的路径">
<img src="小图的路径">
</a>
<div class="big-pic"><img src="" ></div>
CSS
.show-big-pic { position: absolute; } .big-pic { position: absolute; display: none; } .big-pic.active { z-index: 999; display: block; }
JS
let smallPic = document.querySelector(‘.show-big-pic‘); let bigPic = document.querySelector(‘.big-pic‘); let bigImg = bigPic.querySelector(‘img‘); smallPic.onclick = function(e) { e.preventDefault(); bigImg.src = this.href; bigPic.classList.add(‘active‘); }; bigPic.onclick = function() { if (bigPic.classList.contains(‘active‘)) { bigPic.classList.remove(‘active‘); bigImg.src = ‘‘; } };
例子二：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/demo1.css" type="text/css" rel="stylesheet" /> </head> <body> <!-- 代码 开始 --> <div id="content"> <a id="example1" href="images/4006876523_289a8296ee.jpg"><img src="images/4006876523_289a8296ee_m.jpg" /></a> <a id="example2" href="images/3793633099_3e1e53e4ac_o.jpg"><img src="images/3793633099_4f9c3e08b3_m.jpg" /></a> </div> <script src="js/jquery.min.js"></script> <script src="js/jquery.imgbox.pack.js"></script> <script> $(function(){ $("#example1").imgbox(); $("#example2").imgbox({ ‘speedIn‘ : 0, ‘speedOut‘ : 0, ‘alignment‘ : ‘center‘, ‘overlayShow‘ : true, ‘allowMultiple‘ : false }); }); </script> <!-- 代码 结束 --> </body> </html>
CSS
*{ margin:0; padding:0; list-style:none;}
#content{ width:500px; height:170px; margin:100px auto;}
#imgbox-loading {position: absolute;top: 0;left: 0; cursor: pointer;display: none;z-index: 90;}
#imgbox-loading div {background: #FFF;width: 100%;height : 100%;}
#imgbox-overlay {position: absolute;top: 0; left: 0;width: 100%;height: 100%;background: #000;display: none;z-index: 80;}
.imgbox-wrap {position: absolute;top: 0;left: 0;background: #FFF;display: none; z-index: 90;}
.imgbox-img {padding: 0;margin: 0;border: none;width: 100%; height: 100%;vertical-align: top;}
.imgbox-title { padding-top: 10px;font-size: 11px;text-align: center;font-family: Arial;color: #333;display: none;}
.imgbox-bg-wrap {position: absolute;padding: 0;margin: 0;display: none;}
.imgbox-bg {position: absolute;width: 20px; height: 20px;}
标签：overlay script block css 图片放大 family example lock one
原文地址：http://www.cnblogs.com/Harold-Hua/p/7009847.html
