<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img class="img-clouds" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526556071039&di=28b25118ba1b2cfd6426f5283d023359&imgtype=0&src=http%3A%2F%2Fold.bz55.com%2Fuploads%2Fallimg%2F150210%2F139-150210134411-50.jpg" style="width: 243px;height:153px;cursor:pointer;" />
<img class="img-clouds" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526556071035&di=4eff2c3738bbd22d5b7d886bd3fe900c&imgtype=0&src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F654340.jpg" style="width: 243px;height:153px;cursor:pointer;" />
<img class="img-clouds" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526556157364&di=0076dbdea41f77febc18861c3beaff5e&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F017ea2554912be0000019ae9e8a57b.jpg%401280w_1l_2o_100sh.jpg" style="width: 243px;height:153px;cursor:pointer;" />
<img class="img-clouds" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526556226855&di=e4e938754f4460c9388a23ae3b7ffa75&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2507365308%2C3087890272%26fm%3D214%26gp%3D0.jpg" style="width: 243px;height:153px;cursor:pointer;" />
<div class="enlarge_box" style="cursor:pointer;">
<img id="enlarge_box_img" alt="" name="pic" src="">
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//点击评论图片放大
$('.img-clouds').click(function() {
$('.enlarge_box').show();
let img_src = $(this).attr('src');
let $preview = $('#enlarge_box_img').attr('src')
if($preview != img_src) {
$('#enlarge_box_img').attr('src', img_src)
}
//获取图片大小
let widthHtml = $('#enlarge_box_img').width();
let heightHtml = $('#enlarge_box_img').height();
let a_widthHtml = '-' + widthHtml / 2;
let a_heightHtml = '-' + heightHtml / 2;
//图片宽高比例
let proportion = widthHtml / heightHtml;
//获取浏览器可视区域大小
let windowsWidth = $(window).width();
let windowsHeight = $(window).height();
let a_windowsWidth = windowsWidth * 0.8;
let a_windowsHeight = windowsHeight * 0.8;
let b_windowsWidth = '-' + a_windowsWidth / 2;
let b_windowsHeight = "-" + a_windowsHeight / 2
let a = "-" + proportion * a_windowsHeight / 2;
if(widthHtml > a_windowsWidth || heightHtml > a_windowsHeight) {
$('#enlarge_box_img').css({
'height': a_windowsHeight + 'px',
'position': 'fixed',
'display': 'block',
'left': 50 + '%',
'margin-left': a + 'px',
'top': 50 + '%',
'margin-top': b_windowsHeight + 'px',
})
} else {
$('#enlarge_box_img').css({
'position': 'fixed',
'display': 'block',
'left': 50 + '%',
'margin-left': a_widthHtml + 'px',
'top': 50 + '%',
'margin-top': a_heightHtml + 'px',
})
}
});
//点击放大后的图片隐藏
$('.enlarge_box').click(function() {
$('.enlarge_box').hide();
$('#enlarge_box_img').attr('src', '')
$('#enlarge_box_img').removeAttr("style")
});
</script>
</html>
前端技术(5) : 图片点击放大
猜你喜欢
转载自blog.csdn.net/lxinccode/article/details/80353060
今日推荐
周排行