点击小图查看原图
點擊圖片看原圖
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>點擊圖片查看原圖</title> </head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <body><div><img class="pimg" src="http://qinius.scqgkj.com/1564478463ZdTYhX.jpg"style="display: block;margin-bottom: 10px;" width="100px" height="100px"></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>js
//圖片放大$(function () {$(".pimg").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");});}
點擊后：（再次點擊取消）
轉載于:https://www.cnblogs.com/wentutu/p/11271732.html
總結
- 上一篇： PAT1052---------初步了解
- 下一篇： python进阶-第二季第一章