基于JS實現(xiàn)點擊圖片在彈出層顯示大圖效果
更新時間：2022年08月01日 08:30:46 作者：camellia
Javascript是個好東西。Jquery是基于這個好東西的一個強大的庫。本文將利用JavaScript實現(xiàn)點擊圖片在彈出層顯示大圖功能，感興趣的可以了解一下
Javascript是個好東西。
Jquery是基于這個好東西的一個強大的庫。
今天要實現(xià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)前點擊的pimg元素中的src屬性
$(bigimg).attr("src", src);//設(shè)置#bigimg元素的src屬性
/*獲取當(dāng)前點擊圖片的真實大小，并顯示彈出層及大圖*/
$("<img/>").attr("src", src).load(function(){
var windowW = $(window).width();//獲取當(dāng)前窗口寬度
var windowH = $(window).height();//獲取當(dāng)前窗口高度
var realWidth = this.width;//獲取圖片真實寬度
var realHeight = this.height;//獲取圖片真實高度
var imgWidth, imgHeight;
var scale = 0.8;//縮放尺寸，當(dāng)圖片真實寬度和高度大于窗口寬度和高度時進行縮放
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});//設(shè)置#innerdiv的top和left屬性
$(outerdiv).fadeIn("fast");//淡入顯示#outerdiv及.pimg
});
$(outerdiv).click(function(){//再次點擊淡出消失彈出層
$(this).fadeOut("fast");
});
}20220617補充：
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();//阻止默認事件，防止底部內(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 {
// 第一個觸摸點的坐標
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) {
//用到三角函數(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)前點擊的pimg元素中的src屬性
$(bigimg).attr("src", src);//設(shè)置#bigimg元素的src屬性
/*獲取當(dāng)前點擊圖片的真實大小，并顯示彈出層及大圖*/
$("<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;//獲取圖片真實寬度
var realHeight = this.height;//獲取圖片真實高度
var imgWidth, imgHeight;
var scale = 0.8;//縮放尺寸，當(dāng)圖片真實寬度和高度大于窗口寬度和高度時進行縮放
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
});//設(shè)置#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>效果如下圖所示：
到此這篇關(guān)于基于JS實現(xiàn)點擊圖片在彈出層顯示大圖效果的文章就介紹到這了,更多相關(guān)JS彈出層顯示大圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js獲取RadioButtonList的Value/Text及選中值等信息實現(xiàn)代碼
RadioButtonList的Value,Text及選中值等信息想必有很多的朋友都想獲取到，接下來將為你介紹下如何使用js獲取，代碼很詳細，感興趣的你可以參考下，或許對你有所幫助2013-03-03
這篇文章主要介紹了javascript折半查找詳解的相關(guān)資料,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JavaScript逆向案例之如何破解登錄密碼，文章通過12306的登陸方法展開用戶登錄密碼的參數(shù)破解辦法，感興趣的小伙伴可以參考一下2022-06-06
JavaScript詳解使用Promise處理回調(diào)地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調(diào)地獄與async?await修飾符，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
用javascript實現(xiàn)jquery的document.ready功能的實現(xiàn)代碼
實現(xiàn)jQuery的document.ready功能js代碼2009-11-11
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
Nodejs使用mysql模塊之獲得更新和刪除影響的行數(shù)的方法
業(yè)余時間玩nodejs的時候遇到點蛋疼的情況, 在使用mysql模塊連接mysql操作, 想在update, delete語句的時候, 想知道到底update, delete成功了沒有2014-03-03
impress.js 是國外一位開發(fā)者受 Prezi 啟發(fā)，采用 CSS3 與 JavaScript 語言完成的一個可供開發(fā)者使用的表現(xiàn)層框架(演示工具)。感興趣的朋友跟著小編一起學(xué)習(xí)吧2015-09-09
JS中map與forEach無法跳出循環(huán)及every和some的使用
在我們平時使用習(xí)慣中,for循環(huán)里要跳出整個循環(huán)是使用break,但在數(shù)組中用forEach循環(huán)或者map如要退出整個循環(huán)使用break會報錯,使用return也不能跳出循環(huán),下面這篇文章主要介紹了關(guān)于JS中map與forEach無法跳出循環(huán)及every和some的使用的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了如何在CocosCreator里畫個炫酷的雷達圖，對Graphics感興趣的同學(xué)，一定要看看，并且把代碼實踐一下2021-04-04