HTML
<link rel="stylesheet" href="css/baguetteBox.css"> <div class=‘baguetteBox1‘> <a href=‘/test1.jpg‘> <!-- 路径为原图 --> <img src=‘/test1_s.jpg‘> <!-- 显示为缩略图 --> </a> <a href=‘/test3.jpg‘> <!-- 路径为原图 --> <img src=‘/test3_s.jpg‘> <!-- 显示为缩略图 --> </a> </div> <div class=‘baguetteBox2‘> <a href=‘/test2.jpg‘> <!-- 路径为原图 --> <img src=‘/test2_s.jpg‘> <!-- 显示为缩略图 --> </a> </div> <script src="baguetteBox.js"></script>
JS
//执行点击图片弹窗 if(typeof oldIE === ‘undefined‘ && Object.keys) hljs.initHighlighting(); baguetteBox.run(‘.baguetteBox1‘); //不要对同一个baguetteBox执行多次run baguetteBox.run(‘.baguetteBox2‘);
效果:
原文:http://www.cnblogs.com/leap/p/4993355.html