点击图片放大缩小

例子一：

HTML

<a class="show-big-pic" href="大图的路径">
    <img src="小图的路径">
</a>
<div class="big-pic"><img src="" alt=""></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;}

 

posted @ 2017-06-14 17:04  嘆世殘者——華帥  阅读(271)  评论(0)  编辑  收藏  举报