溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“基于JS如何實(shí)現(xiàn)點(diǎn)擊圖片在彈出層顯示大圖效果”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“基于JS如何實(shí)現(xiàn)點(diǎn)擊圖片在彈出層顯示大圖效果”文章吧。
先是html部分：
<div > <img src="https://guanchao.site/uploads/atricle/5db3a72e49efd.jpeg" alt="" id="plus"> </div> <!-- 彈窗部分代碼 --> <div id="outerdiv" > <div id="innerdiv" > <img id="bigimg" 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í)寬度和高度大于窗口寬度和高度時(shí)進(jìn)行縮放
if(realHeight>windowH*scale) {//判斷圖片高度
imgHeight = windowH*scale;//如大于窗口高度，圖片高度進(jìn)行縮放
imgWidth = imgHeight/realHeight*realWidth;//等比例縮放寬度
if(imgWidth>windowW*scale) {//如寬度扔大于窗口寬度
imgWidth = windowW*scale;//再對(duì)寬度進(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);//以最終的寬度對(duì)圖片縮放
var w = (windowW-imgWidth)/2;//計(jì)算圖片與窗口左邊距
var h = (windowH-imgHeight)/2;//計(jì)算圖片與窗口上邊距
$(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端的圖片放大使用上邊的代碼即可，但是在移動(dòng)端的時(shí)候我們就需要用到兩指放大縮小功能，然后還要加上單指移動(dòng)的功能，
基礎(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 > <img src="https://resource.guanchao.site/uploads/atricle/5db513ccbe77f.png" alt="" 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 > <img src="https://resource.guanchao.site/uploads/atricle/5db513ccbe77f.png" alt="" class="plus"> </div> <!-- 彈窗部分代碼 --> <div id="outerdiv" > <div id="innerdiv" > <img id="bigimg" 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); //移動(dòng)端手指移動(dòng)事件,如果不需要移動(dòng)端手指事件,這一部分內(nèi)容可以不加,只要上面兩行代碼以及imgShow()事件 var eleImg = document.querySelector('#innerdiv'); var store = { scale: 1 }; //定義移動(dòng)端的初始位置 var position_top, position_left, pageX, pageY; // 縮放事件的處理 //事件開始 eleImg.addEventListener('touchstart', function (event) { event.preventDefault();//阻止默認(rèn)事件，防止底部?jī)?nèi)容滾動(dòng) //在觸屏設(shè)備下，要判斷是單指還是多指操作，可以通過event.touches數(shù)組對(duì)象的長(zhǎng)度判斷。 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 { // 第一個(gè)觸摸點(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必須加上,否則控制臺(tái)報(bào)錯(cuò) //開始移動(dòng) document.addEventListener('touchmove', function (event) { // event.preventDefault();//阻止默認(rèn)事件，防止底部滾動(dòng) 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); //控制圖片移動(dòng) $('#innerdiv').css({ 'top': position_top + pageY2 - pageY + 'px', "left": position_left + pageX2 - pageX + 'px' }) } else { // 雙指移動(dòng) if (events2) { // 第2個(gè)指頭坐標(biāo)在touchmove時(shí)候獲取 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); }; // 雙指縮放比例計(jì)算 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; }); }); //移動(dòng)端手指頁(yè)面結(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 () { //注意在使用這種方法獲取窗口高度和寬度的時(shí)候, //務(wù)必在html頁(yè)面最上方加上一句<!DOCTYPE html>,否則獲取屏幕高度時(shí)會(huì)出問題 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í)寬度和高度大于窗口寬度和高度時(shí)進(jìn)行縮放 if (realHeight > windowH * scale) {//判斷圖片高度 imgHeight = windowH * scale;//如大于窗口高度，圖片高度進(jìn)行縮放 imgWidth = imgHeight / realHeight * realWidth;//等比例縮放寬度 if (imgWidth > windowW * scale) {//如寬度扔大于窗口寬度 imgWidth = windowW * scale;//再對(duì)寬度進(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) { //這里我怕圖片太大又做了個(gè)判斷 imgWidth = realWidth; imgHeight = realHeight; } else { imgWidth = realWidth * 2; imgHeight = realHeight * 2; } } $(bigimg).css("width", imgWidth);//以最終的寬度對(duì)圖片縮放 var w = (windowW - imgWidth) / 2;//計(jì)算圖片與窗口左邊距 var h = (windowH - imgHeight) / 2;//計(jì)算圖片與窗口上邊距 $(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)擊圖片在彈出層顯示大圖效果”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼