Question

我有div这个镜头在缩放图像时起作用。但问题是我希望它循环。我正在使用它：

-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;

问题在于它会使div圆形，但不会隐藏不属于圆形的图像角，因此会显示一个矩形。

网址为：http://chokate.maninactionscript.com/chokates/

单击沙漠图片，然后在右侧看到较大的图像以获得缩放效果。如果您提供镜头div border 1px solid red，那么您可以看到div实际上是圆形的，但它不会隐藏无用的图像部分。

有什么想法吗？

Answer 1

如果在设置了border-radius的元素中有图像，并且您想要隐藏图像的“角落”，则需要在图像上设置border-radius以匹配。

但在你的情况下，由于你的图像比你的包含元素大得多，所以不会起作用。最好使用<div>作为镜头，并设置background-image以匹配您的图像。

演示：http://jsfiddle.net/ThinkingStiff/wQyLJ/

HTML：

<div id="image-frame">
<img id="image" src="http://thinkingstiff.com/images/matt.jpg" />
<div id="lens" ></div>
<div>

CSS：

#image-frame {
    position: relative;
}

#lens {
    background-repeat: no-repeat;
    border-radius: 150px;
    height: 150px;
    position: absolute;
    width: 150px;
}

脚本：

document.getElementById( 'image-frame' ).addEventListener( 'mousemove', function ( event ) {

    var lens = document.getElementById( 'lens' ),
        image = document.getElementById( 'image' ),
        radius = lens.clientWidth / 2,
        imageTop = this.documentOffsetTop,
        imageLeft = this.documentOffsetLeft,
        zoom = 4,
        lensX = ( event.pageX - radius - imageLeft ) + 'px',
        lensY = ( event.pageY - radius - imageTop ) + 'px',
        zoomWidth = ( image.clientWidth * zoom ) + 'px',
        zoomHeight = ( image.clientHeight * zoom ) + 'px',
        zoomX = -( ( ( event.pageX - imageLeft ) * zoom ) - radius ) + 'px',
        zoomY = -( ( ( event.pageY - imageTop ) * zoom ) - radius ) + 'px';

    if( event.pageX > imageLeft + image.clientWidth 
        || event.pageX < imageLeft
        || event.pageY > imageTop + image.clientHeight 
        || event.pageY < imageTop  ) {

        lens.style.display = 'none';

    } else {

        lens.style.left = lensX;
        lens.style.top = lensY;
        lens.style.backgroundImage = 'url(' + image.src + ')';
        lens.style.backgroundSize = zoomWidth + ' ' + zoomHeight;
        lens.style.backgroundPosition = zoomX + ' ' + zoomY;
        lens.style.display = 'block';

    };

}, false );

window.Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

window.Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

输出：

enter image description here

Answer 2

尝试将其作为背景图像应用于容器，而不是在镜头div中使用图像。使用Chrome border-radii的背景图片似乎比img标签更友好。

Answer 3

好的，为了兑换自己，我认为可以通过将图像嵌套在另一个div中来修复这个问题。在Chrome中，圆角不会隐藏溢出，如果div是绝对位置，但如果你放入一个非绝对定位的div并应用圆角css并设置隐藏溢出，它应该工作正常：

<div style='position:absolute'>
   <div style='-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;overflow:hidden'>
      <img src='' />
   </div>
</div>

这里类似的东西：How to make CSS3 rounded corners hide overflow in Chrome/Opera

Answer 4

正确渲染边框（您可以通过将背景设置为红色并关闭图像来查看） - 问题在于图像穿透。我认为您需要简化您的实施。为什么不只有一个div，图像作为背景，没有内部div和图像。从这个复杂的代码，与所有CSS

<div style="position: absolute;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 200px;
    height: 200px;
    left: 971px;
    top: 311px;
    display: none; ">
    <div style="position: relative;
             border-top-left-radius: 200px 200px;
             border-top-right-radius: 200px 200px;
             border-bottom-right-radius: 200px 200px;
             border-bottom-left-radius: 200px 200px;
             left: -934px; top: 716px; ">
          <img src="/img/rsz_desert_mid.jpg" style="width: 660px; height: 548px; ">
     </div>
 </div>

要

<div id="lens" style="background-position: -513px -12px; top: 100px; left : 100px;"></div>

用css

#lens {
    background-image : url( .... );
    background-repeat: no-repat;
    width : 200px;
    height : 200px;
    border-radius : 200px;
    -mox-border-radius : 200px;
    -webkit-border-radius : 200px;
    position : absolute;
 }

并让JS更改#lens元素的背景位置和顶部/左侧

Answer 5

您的实施存在错误，显示上一次缩放。

buggy zoom http://www.vertigrated.com/images/buggyzoom.png

如何在Chrome中制作圆形Div？

5 个答案: