如題，我想要點擊圖片的時候彈出居中顯示放大，這個功能也是看別人的實作方法而來的，只是有細微的變化輕松解決點擊圖片放大問題
下面是我自己仿造他寫的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>點擊圖片放大</title>
<script src="../base/jquery-3.4.1.min.js"></script>
<style type="text/css">
.imgPreview {
display: none;
top: 0;
left: 0;
width: 100%; /*容器占滿整個螢屏*/
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
}
.imgPreview img {
z-index: 100;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*添加滑鼠移入圖片效果*/
.img {
cursor: url("ico/放大鏡.png"), auto;
}
</style>
<script type="text/javascript">
$(function () {
$('.img').on('click', function () {
var src = $(this).attr('src');
$('.imgPreview img').attr('src', src);
$('.imgPreview').show()
});
$('.imgPreview').on('click', function () {
$('.imgPreview').hide()
});
})
</script>
</head>
<body>
<img src="picture/ec88b5c0c7387bb24c5169fb5d451c3c.jpeg" class="img">
<div class="imgPreview">
<img src="#" alt="" id="imgPreview">
</div>
</body>
</html>
效果如下
大致說下原理，點擊圖片觸發單擊回應事件，半透明的包含塊全屏顯示，然后圖片進行放大居中顯示，
包含塊如下：
<div class="imgPreview">
<img src="#" alt="" id="imgPreview">
</div>
其樣式為
.imgPreview {
display: none;
top: 0;
left: 0;
width: 100%; /*容器占滿整個螢屏*/
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
}
1. 實作包含塊全屏顯示： 開啟定位fixed脫離檔案流，設定top和left為0（最好top和left都要設定0，我看原作者只設定了top，但我在應用到bootsrap中的時候會出現左邊沒有覆寫完，必須要設定left也為0），width和height100%使的包含塊全屏覆寫，最后設定了半透明度，因為開始設定的隱藏，只有單擊圖片后才會全屏覆寫顯示，
2. 實作圖片居中顯示： 通過jquery將包含塊里的src設定成原有的圖片src，然后通過設定包含塊內的css樣式達到居中放大的目的，其中通過設定width的值（百分比是相對于螢屏尺寸）達到放大的目的，通過設定top和left（百分比是相對于螢屏尺寸）進行定位，使得圖片左上角在螢屏正中間，然后設定transform：translate（-50%，-50%）相對自身尺寸移動，使得圖片中心位置移動到螢屏中心位置，
.imgPreview img {
z-index: 100;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
ps1：中間的代碼添加了cursor屬性是為了給滑鼠移入圖片時滑鼠指標變成放大鏡的模樣，具體見通過添加css樣式cursor屬性，改變滑鼠的外形，變成放大鏡
ps2:開啟fixed定位后，width、height、left、top的百分比都是相對于螢屏而言
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245687.html
標籤：其他