基於JS實現點擊圖片在彈出層顯示大圖效果
Javascript是個好東西。
Jquery是基於這個好東西的一個強大的庫。
今天要實現的功能是基於這兩個玩意兒的。
點擊圖片，在彈出層顯示原圖。
大概效果是這樣的：
上代碼：
先是html部分：
<div style="text-align:center;margin-top:200px;">
<img src="https://guanchao.site/uploads/atricle/5db3a72e49efd.jpeg" alt="" style="width:100px;" id="plus">
</div>
<!-- 彈窗部分代碼 -->
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
</div>
<!-- 彈窗部分代碼 -->
Js部分：
$(function(){
$("#plus").click(function(){
var _this = $(this);//將當前的pimg元素作為_this傳入函數
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
});
function imgShow(outerdiv, innerdiv, bigimg, _this){
var src = _this.attr("src");//獲取當前點擊的pimg元素中的src屬性
$(bigimg).attr("src", src);//設置#bigimg元素的src屬性
/*獲取當前點擊圖片的真實大小，並顯示彈出層及大圖*/
$("<img/>").attr("src", src).load(function(){
var windowW = $(window).width();//獲取當前窗口寬度
var windowH = $(window).height();//獲取當前窗口高度
var realWidth = this.width;//獲取圖片真實寬度
var realHeight = this.height;//獲取圖片真實高度
var imgWidth, imgHeight;
var scale = 0.8;//縮放尺寸，當圖片真實寬度和高度大於窗口寬度和高度時進行縮放
if(realHeight>windowH*scale) {//判斷圖片高度
imgHeight = windowH*scale;//如大於窗口高度，圖片高度進行縮放
imgWidth = imgHeight/realHeight*realWidth;//等比例縮放寬度
if(imgWidth>windowW*scale) {//如寬度扔大於窗口寬度
imgWidth = windowW*scale;//再對寬度進行縮放
}
} else if(realWidth>windowW*scale) {//如圖片高度合適，判斷圖片寬度
imgWidth = windowW*scale;//如大於窗口寬度，圖片寬度進行縮放
imgHeight = imgWidth/realWidth*realHeight;//等比例縮放高度
} else {//如果圖片真實高度和寬度都符合要求，高寬不變
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width",imgWidth);//以最終的寬度對圖片縮放
var w = (windowW-imgWidth)/2;//計算圖片與窗口左邊距
var h = (windowH-imgHeight)/2;//計算圖片與窗口上邊距
$(innerdiv).css({"top":h, "left":w});//設置#innerdiv的top和left屬性
$(outerdiv).fadeIn("fast");//淡入顯示#outerdiv及.pimg
});
$(outerdiv).click(function(){//再次點擊淡出消失彈出層
$(this).fadeOut("fast");
});
}
20220617補充：
PC端的圖片放大使用上邊的代碼即可，但是在移動端的時候我們就需要用到兩指放大縮小功能，然後還要加上單指移動的功能，
基礎代碼還是與上邊一樣，我就不廢話瞭，直接上完整的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.0/jquery.min.js"
type="application/javascript"></script>
</head>
<body>
<div style="text-align:center;margin-top:200px;">
<img src="https://resource.guanchao.site/uploads/atricle/5db513ccbe77f.png" alt="" style="width:100px;" class="plus">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center;margin-top:200px;">
<img src="https://resource.guanchao.site/uploads/atricle/5db513ccbe77f.png" alt="" style="width:100px;"
class="plus">
</div>
<!-- 彈窗部分代碼 -->
<div id="outerdiv"
style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
</div>
<!-- 彈窗部分代碼 -->
</body>
</html>
<script src="https://dev.mools.net/lims/web/common/js/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
$(function () {
$(".plus").click(
function () {
var _this = $(this);//將當前的pimg元素作為_this傳入函數
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
//移動端手指移動事件,如果不需要移動端手指事件,這一部分內容可以不加,隻要上面兩行代碼以及imgShow()事件
var eleImg = document.querySelector('#innerdiv');
var store = {
scale: 1
};
//定義移動端的初始位置
var position_top, position_left, pageX, pageY;
// 縮放事件的處理
//事件開始
eleImg.addEventListener('touchstart', function (event) {
event.preventDefault();//阻止默認事件，防止底部內容滾動
//在觸屏設備下，要判斷是單指還是多指操作，可以通過event.touches數組對象的長度判斷。
var touches = event.touches;
var events = touches[0];//單指
var events2 = touches[1];//雙指
if (touches.length == 1) { //單指操作
pageX = Number(events.pageX);
pageY = Number(events.pageY);
store.moveable = true;
var _obj = $('#innerdiv');
// .css獲取的值是字符串
position_left = parseFloat(_obj.css('left')
.split('px'));
position_top = parseFloat(_obj.css('top')
.split('px'));
} else {
// 第一個觸摸點的坐標
store.pageX = events.pageX;
store.pageY = events.pageY;
store.moveable = true;
if (events2) {
store.pageX2 = events2.pageX;
store.pageY2 = events2.pageY;
}
store.originScale = store.scale || 1;
}
}, { passive: false }); //passive: false必須加上,否則控制臺報錯
//開始移動
document.addEventListener('touchmove', function (event) {
// event.preventDefault();//阻止默認事件，防止底部滾動
if (!store.moveable) {
return;
}
var touches = event.touches;
var events = touches[0];
var events2 = touches[1];
if (touches.length == 1)
{
var pageX2 = Number(events.pageX);
var pageY2 = Number(events.pageY);
//控制圖片移動
$('#innerdiv').css({
'top': position_top + pageY2 - pageY + 'px',
"left": position_left + pageX2 - pageX + 'px'
})
}
else
{
// 雙指移動
if (events2) {
// 第2個指頭坐標在touchmove時候獲取
if (!store.pageX2) {
store.pageX2 = events2.pageX;
}
if (!store.pageY2) {
store.pageY2 = events2.pageY;
}
// 獲取坐標之間的距離
var getDistance = function (start, stop) {
//用到三角函數
return Math.hypot(stop.x - start.x,
stop.y - start.y);
};
// 雙指縮放比例計算
var zoom = getDistance({
x: events.pageX,
y: events.pageY
}, {
x: events2.pageX,
y: events2.pageY
}) / getDistance({
x: store.pageX,
y: store.pageY
}, {
x: store.pageX2,
y: store.pageY2
});
// 應用在元素上的縮放比例
var newScale = store.originScale * zoom;
// 最大縮放比例限制
if (newScale > 3)
{
newScale = 3;
}
// 記住使用的縮放值
store.scale = newScale;
// 圖像應用縮放效果
eleImg.style.transform = 'scale('
+ newScale + ')';
}
}
}, { passive: false });//*/
document.addEventListener('touchend', function () {
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
document.addEventListener('touchcancel', function () {
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
});
//移動端手指頁面結束
});
//遮罩層圖片位置
function imgShow(outerdiv, innerdiv, bigimg, _this) {
//這是剛才判斷是否PC端的函數事件
var flag = IsPC();
console.log(flag);
var src = _this.attr("src");//獲取當前點擊的pimg元素中的src屬性
$(bigimg).attr("src", src);//設置#bigimg元素的src屬性
/*獲取當前點擊圖片的真實大小，並顯示彈出層及大圖*/
$("<img/>").attr("src", src).load(function () {
//註意在使用這種方法獲取窗口高度和寬度的時候,
//務必在html頁面最上方加上一句<!DOCTYPE html>,否則獲取屏幕高度時會出問題
var windowW = $(window).width();//獲取當前窗口寬度
var windowH = $(window).height();//獲取當前窗口高度
var realWidth = this.width;//獲取圖片真實寬度
var realHeight = this.height;//獲取圖片真實高度
var imgWidth, imgHeight;
var scale = 0.8;//縮放尺寸，當圖片真實寬度和高度大於窗口寬度和高度時進行縮放
if (realHeight > windowH * scale) {//判斷圖片高度
imgHeight = windowH * scale;//如大於窗口高度，圖片高度進行縮放
imgWidth = imgHeight / realHeight * realWidth;//等比例縮放寬度
if (imgWidth > windowW * scale) {//如寬度扔大於窗口寬度
imgWidth = windowW * scale;//再對寬度進行縮放
}
} else if (realWidth > windowW * scale) {//如圖片高度合適，判斷圖片寬度
imgWidth = windowW * scale;//如大於窗口寬度，圖片寬度進行縮放
imgHeight = imgWidth / realWidth * realHeight;//等比例縮放高度
} else {//如果圖片真實高度和寬度都符合要求，高寬不變
if (flag == false) {
imgWidth = realWidth;
imgHeight = realHeight;
} else if (realWidth >= 1000) { //這裡我怕圖片太大又做瞭個判斷
imgWidth = realWidth;
imgHeight = realHeight;
} else {
imgWidth = realWidth * 2;
imgHeight = realHeight * 2;
}
}
$(bigimg).css("width", imgWidth);//以最終的寬度對圖片縮放
var w = (windowW - imgWidth) / 2;//計算圖片與窗口左邊距
var h = (windowH - imgHeight) / 2;//計算圖片與窗口上邊距
$(innerdiv).css({
"top": h,
"left": w
});//設置#innerdiv的top和left屬性
$(outerdiv).fadeIn("fast");//淡入顯示#outerdiv及.pimg
});
$(outerdiv).click(function () {//再次點擊淡出消失彈出層
$(this).fadeOut("fast");
});
};
function IsPC()
{
var sUserAgent = navigator.userAgent;
if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {
return false;
}
else {
return true;
}
}
</script>
效果如下圖所示：
到此這篇關於基於JS實現點擊圖片在彈出層顯示大圖效果的文章就介紹到這瞭,更多相關JS彈出層顯示大圖內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！