基于JS實(shí)現(xiàn)點(diǎn)擊圖片在彈出層顯示大圖效果
更新時間：2022年08月01日 08:30:46 作者：camellia
Javascript是個好東西。Jquery是基于這個好東西的一個強(qiáng)大的庫。本文將利用JavaScript實(shí)現(xiàn)點(diǎn)擊圖片在彈出層顯示大圖功能，感興趣的可以了解一下
Javascript是個好東西。
Jquery是基于這個好東西的一個強(qiáng)大的庫。
今天要實(shí)現(xiàn)的功能是基于這兩個玩意兒的。
點(diǎn)擊圖片，在彈出層顯示原圖。
大概效果是這樣的：
上代碼：
先是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);//將當(dāng)前的pimg元素作為_this傳入函數(shù)
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
});
function imgShow(outerdiv, innerdiv, bigimg, _this){
var src = _this.attr("src");//獲取當(dāng)前點(diǎn)擊的pimg元素中的src屬性
$(bigimg).attr("src", src);//設(shè)置#bigimg元素的src屬性
/*獲取當(dāng)前點(diǎn)擊圖片的真實(shí)大小，并顯示彈出層及大圖*/
$("<img/>").attr("src", src).load(function(){
var windowW = $(window).width();//獲取當(dāng)前窗口寬度
var windowH = $(window).height();//獲取當(dāng)前窗口高度
var realWidth = this.width;//獲取圖片真實(shí)寬度
var realHeight = this.height;//獲取圖片真實(shí)高度
var imgWidth, imgHeight;
var scale = 0.8;//縮放尺寸，當(dāng)圖片真實(shí)寬度和高度大于窗口寬度和高度時進(jìn)行縮放
if(realHeight>windowH*scale) {//判斷圖片高度
imgHeight = windowH*scale;//如大于窗口高度，圖片高度進(jìn)行縮放
imgWidth = imgHeight/realHeight*realWidth;//等比例縮放寬度
if(imgWidth>windowW*scale) {//如寬度扔大于窗口寬度
imgWidth = windowW*scale;//再對寬度進(jìn)行縮放
}
} else if(realWidth>windowW*scale) {//如圖片高度合適，判斷圖片寬度
imgWidth = windowW*scale;//如大于窗口寬度，圖片寬度進(jìn)行縮放
imgHeight = imgWidth/realWidth*realHeight;//等比例縮放高度
} else {//如果圖片真實(shí)高度和寬度都符合要求，高寬不變
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width",imgWidth);//以最終的寬度對圖片縮放
var w = (windowW-imgWidth)/2;//計算圖片與窗口左邊距
var h = (windowH-imgHeight)/2;//計算圖片與窗口上邊距
$(innerdiv).css({"top":h, "left":w});//設(shè)置#innerdiv的top和left屬性
$(outerdiv).fadeIn("fast");//淡入顯示#outerdiv及.pimg
});
$(outerdiv).click(function(){//再次點(diǎn)擊淡出消失彈出層
$(this).fadeOut("fast");
});
}20220617補(bǔ)充：
PC端的圖片放大使用上邊的代碼即可，但是在移動端的時候我們就需要用到兩指放大縮小功能，然后還要加上單指移動的功能，
基礎(chǔ)代碼還是與上邊一樣，我就不廢話了，直接上完整的代碼：
<!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);//將當(dāng)前的pimg元素作為_this傳入函數(shù)
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
//移動端手指移動事件,如果不需要移動端手指事件,這一部分內(nèi)容可以不加,只要上面兩行代碼以及imgShow()事件
var eleImg = document.querySelector('#innerdiv');
var store = {
scale: 1
};
//定義移動端的初始位置
var position_top, position_left, pageX, pageY;
// 縮放事件的處理
//事件開始
eleImg.addEventListener('touchstart', function (event) {
event.preventDefault();//阻止默認(rèn)事件，防止底部內(nèi)容滾動
//在觸屏設(shè)備下，要判斷是單指還是多指操作，可以通過event.touches數(shù)組對象的長度判斷。
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 {
// 第一個觸摸點(diǎn)的坐標(biāo)
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();//阻止默認(rèn)事件，防止底部滾動
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個指頭坐標(biāo)在touchmove時候獲取
if (!store.pageX2) {
store.pageX2 = events2.pageX;
}
if (!store.pageY2) {
store.pageY2 = events2.pageY;
}
// 獲取坐標(biāo)之間的距離
var getDistance = function (start, stop) {
//用到三角函數(shù)
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
});
// 應(yīng)用在元素上的縮放比例
var newScale = store.originScale * zoom;
// 最大縮放比例限制
if (newScale > 3)
{
newScale = 3;
}
// 記住使用的縮放值
store.scale = newScale;
// 圖像應(yīng)用縮放效果
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;
});
});
//移動端手指頁面結(jié)束
});
//遮罩層圖片位置
function imgShow(outerdiv, innerdiv, bigimg, _this) {
//這是剛才判斷是否PC端的函數(shù)事件
var flag = IsPC();
console.log(flag);
var src = _this.attr("src");//獲取當(dāng)前點(diǎn)擊的pimg元素中的src屬性
$(bigimg).attr("src", src);//設(shè)置#bigimg元素的src屬性
/*獲取當(dāng)前點(diǎn)擊圖片的真實(shí)大小，并顯示彈出層及大圖*/
$("<img/>").attr("src", src).load(function () {
//注意在使用這種方法獲取窗口高度和寬度的時候,
//務(wù)必在html頁面最上方加上一句<!DOCTYPE html>,否則獲取屏幕高度時會出問題
var windowW = $(window).width();//獲取當(dāng)前窗口寬度
var windowH = $(window).height();//獲取當(dāng)前窗口高度
var realWidth = this.width;//獲取圖片真實(shí)寬度
var realHeight = this.height;//獲取圖片真實(shí)高度
var imgWidth, imgHeight;
var scale = 0.8;//縮放尺寸，當(dāng)圖片真實(shí)寬度和高度大于窗口寬度和高度時進(jìn)行縮放
if (realHeight > windowH * scale) {//判斷圖片高度
imgHeight = windowH * scale;//如大于窗口高度，圖片高度進(jìn)行縮放
imgWidth = imgHeight / realHeight * realWidth;//等比例縮放寬度
if (imgWidth > windowW * scale) {//如寬度扔大于窗口寬度
imgWidth = windowW * scale;//再對寬度進(jìn)行縮放
}
} else if (realWidth > windowW * scale) {//如圖片高度合適，判斷圖片寬度
imgWidth = windowW * scale;//如大于窗口寬度，圖片寬度進(jìn)行縮放
imgHeight = imgWidth / realWidth * realHeight;//等比例縮放高度
} else {//如果圖片真實(shí)高度和寬度都符合要求，高寬不變
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
});//設(shè)置#innerdiv的top和left屬性
$(outerdiv).fadeIn("fast");//淡入顯示#outerdiv及.pimg
});
$(outerdiv).click(function () {//再次點(diǎn)擊淡出消失彈出層
$(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>效果如下圖所示：
到此這篇關(guān)于基于JS實(shí)現(xiàn)點(diǎn)擊圖片在彈出層顯示大圖效果的文章就介紹到這了,更多相關(guān)JS彈出層顯示大圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript對象的創(chuàng)建模式與繼承模式示例講解
繼承機(jī)制是面向?qū)ο蟪绦蛟O(shè)計使代碼可以復(fù)用的最重要的手段，它允許程序員在保持原有的特性基礎(chǔ)上進(jìn)行擴(kuò)展，增加功能，這樣產(chǎn)生新的類，稱作是派生類。繼承呈現(xiàn)了面向?qū)ο蟪绦蛟O(shè)計的層析結(jié)構(gòu)，體現(xiàn)了由簡單到復(fù)雜的認(rèn)知過程。繼承是類設(shè)計層次的復(fù)用2022-12-12
indexOf()?方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置，這篇文章主要介紹了js?indexOf?的正確用法,需要的朋友可以參考下2023-02-02
本文介紹怎樣利用JavaScript來阻止表單提交的兩種方法，分別是return false和使用preventDefault()，有需要的可以參考借鑒，下面一起來看看。2016-08-08
JS時間戳為13位，包含3位毫秒的，而PHP只有10位不包含毫秒的，這就是為什么對不上號原因，處理方法如下2014-06-06
JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊展開或隱藏表格行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊展開或隱藏表格行的方法,實(shí)例分析了javascript操作table表格與css樣式的技巧,需要的朋友可以參考下2015-03-03
Javascript中浮點(diǎn)數(shù)相乘的一個解決方法
這篇文章主要介紹了Javascript中浮點(diǎn)數(shù)相乘的一個解決方法,需要的朋友可以參考下2014-06-06
JavaScript實(shí)現(xiàn)星座查詢功能 附詳細(xì)代碼
最近小編在做一個項(xiàng)目，其中涉及到一個模塊關(guān)于星座查詢功能，即在文本框中輸入一個生日值，點(diǎn)擊按鈕可以得到對應(yīng)的星座，怎么實(shí)現(xiàn)這個需求呢？下面小編通過示例代碼給大家介紹下，需要的朋友參考下吧2021-11-11
這篇文章主要介紹了微信小程序接入微信支付實(shí)現(xiàn)過程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
bootstrap+jQuery實(shí)現(xiàn)的動態(tài)進(jìn)度條功能示例
這篇文章主要介紹了bootstrap+jQuery實(shí)現(xiàn)的動態(tài)進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了bootstrap+jQuery實(shí)現(xiàn)動態(tài)進(jìn)度條的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
本文主要給大家分享的是一則javascript實(shí)現(xiàn)的自定義右鍵行為的小技巧，非常的簡單實(shí)用，有相同需求的小伙伴可以參考下。2015-03-03