Transcrypt移植放大镜JS代码至Python时的边框覆盖问题求助

Let's break down what's likely causing your magnifier border to cover the entire image, and how to fix it—this usually boils down to small discrepancies in how Transcrypt handles DOM styling compared to vanilla JavaScript.

Common Causes & Fixes #

1. Missing CSS Units for Positioning

In the original JavaScript code, all positional styles (like left and top) are set with a px unit attached. If your Python code is assigning raw numbers instead of string values with units, the browser won't interpret the positioning correctly, causing the magnifier element to default to covering the entire parent container.

Example of the mistake:

# Wrong: No unit, browser ignores this value
magnifier.style.left = x
magnifier.style.top = y

Fix:

# Correct: Append "px" to create valid CSS values
magnifier.style.left = f"{x}px"
magnifier.style.top = f"{y}px"

2. Missing position: absolute on the Magnifier

The magnifier element relies on absolute positioning to float over the image without taking up space in the document flow. If this style isn't set (either in your CSS or dynamically in Python), the element will default to static positioning, which causes it to stretch to the full width/height of its parent.

Fix via CSS:
Add this to your stylesheet:

.magnifier {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  /* Keep other styles like background properties here */
}

Or fix dynamically in Python:

magnifier.style.position = "absolute"

3. Incorrect Cursor Position Calculation

Double-check your getCursorPos function to ensure it's correctly calculating the mouse position relative to the image (not the entire window). A miscalculation here can throw off the magnifier's positioning, leading to unexpected behavior.

Your Python implementation should mirror the original JS logic closely:

def getCursorPos(e):
    e = e or window.event
    img_rect = img.getBoundingClientRect()
    x = e.pageX - img_rect.left
    y = e.pageY - img_rect.top
    # Adjust for page scroll offset
    x -= window.pageXOffset
    y -= window.pageYOffset
    return {'x': x, 'y': y}

Verify the Full Flow #

Once you've applied these fixes, test the following:

• The magnifier should follow your mouse cursor over the image
• The border should stay constrained to the magnifier's circular/rectangular shape
• The zoomed portion of the image should display correctly inside the magnifier

If you were commenting out a line related to positioning or styling to make it partially work, that line was likely the one missing the unit or positioning rule.

内容的提问来源于stack exchange，提问作者bunkus