$(document).ready(function() { fetchScroll(); page(); function page() { var windowWidth = $(window).width(), documentHeight = $(document).height(), windowHeight = $(window).height(); if (windowWidth < 1280) { $(".page").width(1280); } else { $(".page").width(windowWidth); } } $(window).resize(function() { page(); }); $(".j-btn-menu").on("click", function(e) { e.preventDefault(); $(".module").toggleClass("is-open"); var menu = $(this).data("menu"); $("#" + menu).slideToggle("fast"); }); $(".module").hover(function() { var $this = $(this); $this.find(".info-short").stop().css({ opacity:0 }, 500); $this.find(".info-full").stop().slideDown(); }, function() { var $this = $(this); $this.find(".info-full").stop().slideUp("fast"); $this.find(".info-short").stop().animate({ opacity:1 }, 500); }); });

这段代码是用来控制网页的自适应和菜单的开关。当页面加载完成后，会执行fetchScroll()和page()函数。page()函数会获取窗口的宽度、文档的高度和窗口的高度，并根据窗口宽度的大小来设置页面的宽度。当窗口大小改变时，会重新执行page()函数来适应窗口大小的变化。当点击菜单按钮时，会切换模块的开关状态，并获取菜单的数据。

相关问题

function showPopup(imageSrc) { var popup = document.createElement("div"); var popupImg = document.createElement("img"); var scale = 1; var isDragging = false; var startX, startY, translateX, translateY; // 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = scale(${scale}); // 加载完成后计算图片的宽高比例 popupImg.onload = function() { var imgWidth = popupImg.width; var imgHeight = popupImg.height; // 计算图片的缩放比例 var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var widthScale = windowWidth / imgWidth; var heightScale = windowHeight / imgHeight; scale = Math.min(widthScale, heightScale); // 设置弹出窗口中的图片样式 popupImg.style.transform = `scale(${scale})`; popupImg.style.display = "block"; popupImg.style.margin = "auto"; function centerPopup() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var popupRect = popup.getBoundingClientRect(); var popupWidth = popupRect.width; var popupHeight = popupRect.height; scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var offsetLeft = (windowWidth - popupWidth * scale) / 2; var offsetTop = (windowHeight - popupHeight * scale) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 function setPopupStyle() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 popup.style.position = "fixed"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; popup.onclick = function (event) { if (event.target === popup) { popup.style.display = "none"; } }; } // 在设置图片加载完成后调用居中弹出窗口和设置悬浮窗样式的函数 popupImg.onload = function() { // 设置图片缩放比例 var imgWidth = popupImg.width; var imgHeight = popupImg.height; var widthScale = window.innerWidth * 0.8 / imgWidth; var heightScale = window.innerHeight * 0.8 / imgHeight; scale = Math.min(widthScale, heightScale); popupImg.style.transform = scale(${scale}); // 设置弹出窗口样式和居中位置 setPopupStyle(); centerPopup(); // 显示图片和悬浮窗 popupImg.style.display = "block"; popup.style.display = "block"; } // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup);这段代码可以怎么优化

这段代码可以进行一些优化，主要包括以下几个方面：

1. 将重复使用的代码片段提取为函数：可以将计算弹出窗口位置的代码和设置弹出窗口样式的代码提取为独立的函数，以提高代码的可读性和可维护性。

function centerPopup() {
  // 计算弹出窗口位置的代码
}

function setPopupStyle() {
  // 设置弹出窗口样式的代码
}

2. 使用事件委托来处理点击事件：可以使用事件委托的方式，将点击事件处理函数绑定在父元素上，避免在每次点击时都添加事件处理函数。

popup.onclick = function(event) {
  if (event.target === popup) {
    popup.style.display = "none";
  }
};

可以改为：

document.addEventListener("click", function(event) {
  if (event.target === popup) {
    popup.style.display = "none";
  }
});

3. 使用字符串模板来简化代码：可以使用字符串模板（template string）来简化字符串拼接的过程，使代码更易读。

popupImg.style.transform = `scale(${scale})`;

4. 将全局变量改为局部变量：在适当的地方将全局变量改为局部变量，以避免全局作用域的污染。

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

以上是一些可以对代码进行优化的建议，具体的优化方式可以根据您的实际需求和代码结构进行调整。

// 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = `scale(${scale})`; // 加载完成后计算图片的宽高比例 popupImg.onload = function() { var imgWidth = popupImg.width; var imgHeight = popupImg.height; // 计算图片的缩放比例 var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var widthScale = windowWidth / imgWidth; var heightScale = windowHeight / imgHeight; scale = Math.min(widthScale, heightScale); // 设置弹出窗口中的图片样式 popupImg.style.transform = `scale(${scale})`; popupImg.style.display = "block"; popupImg.style.margin = "auto"; // 居中弹出窗口 function centerPopup() { var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offsetLeft = (windowWidth - popupWidth) / 2; var offsetTop = (windowHeight - popupHeight) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 popup.style.position = "fixed"; popup.style.top = "10%"; popup.style.left = "10%"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999";这是我的代码，经过上面设置后，当表格行数过多时任然会存在放大图片的悬浮窗未在屏幕中心，靠近页面底部，且只显示一半图片

非常抱歉，我之前给出的解决方案可能不完全适用于你的情况。根据你提供的代码，我注意到你在设置弹出窗口样式时，将固定的 `top` 和 `left` 值应用于悬浮窗，这可能导致在表格行数过多时出现位置偏移的问题。

为了解决这个问题，你可以将固定的 `top` 和 `left` 值改为动态计算，以确保悬浮窗总是居中显示。以下是修改的代码示例：

// 居中弹出窗口
function centerPopup() {
  var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算
  var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算
  var popupWidth = popup.offsetWidth;
  var popupHeight = popup.offsetHeight;
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var offsetLeft = (windowWidth - popupWidth) / 2;
  var offsetTop = (windowHeight - popupHeight) / 2 + scrollTop;

  // 设置弹出窗口的位置
  popup.style.left = offsetLeft + "px";
  popup.style.top = offsetTop + "px";
}

// 设置悬浮窗样式
function setPopupStyle() {
  var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算
  var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算

  popup.style.position = "fixed";
  popup.style.width = windowWidth + "px";
  popup.style.height = windowHeight + "px";
  popup.style.backgroundColor = "transparent";
  popup.style.zIndex = "9999";
}

// 在设置图片加载完成后调用居中弹出窗口和设置悬浮窗样式的函数
popupImg.onload = function() {
  // 设置图片缩放比例
  var imgWidth = popupImg.width;
  var imgHeight = popupImg.height;
  var widthScale = window.innerWidth * 0.8 / imgWidth;
  var heightScale = window.innerHeight * 0.8 / imgHeight;
  scale = Math.min(widthScale, heightScale);
  popupImg.style.transform = `scale(${scale})`;

  // 设置弹出窗口样式和居中位置
  setPopupStyle();
  centerPopup();

  // 显示图片和悬浮窗
  popupImg.style.display = "block";
  popup.style.display = "block";
}

通过以上修改，我们在加载图片完成后调用了 `setPopupStyle()` 和 `centerPopup()` 函数来设置弹出窗口的样式和位置。这样，在表格行数过多时，悬浮窗应该能够在屏幕中心显示，并且图片能够完整展示。请尝试更新代码并再次测试。如果问题仍然存在，请提供更多详细信息，以便我能够更好地帮助你解决问题。