如何在Chrome中制作圆形Div？

I have this div which acts a lens in zooming of the image. But the problem is that I want it circular. I am using this for that:

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

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

The problem is that it makes the div circular but does not hide the image corners which are not part of the circle and hence shows a rectangle.

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

The URL is: http://chokate.maninactionscript.com/chokates/

网址是:http://chokate.maninactionscript.com/chokates/

Click on the desert picture and then see the bigger image on the right for zoom effect. If you give the lens div border 1px solid red then you can see that the div is actually circular but it doesn't hide the useless part of images.

单击沙漠图片,然后在右侧看到更大的图像以获得缩放效果。如果您将镜头div边框1px固定为红色,那么您可以看到div实际上是圆形的,但它不会隐藏图像中无用的部分。

Any ideas?

5 个解决方案

#1

If you have an image inside an element that has border-radius set, and you want to hide the "corners" of the image, you need to set border-radius on the image to match.

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

But in your case that won't work because your image is much larger than your containing element. Better is to use a <div> as the lens and set background-image to match your image.

但在您的情况下,由于您的图像比包含的元素大得多,因此无效。最好使用

作为镜头,并设置背景图像以匹配您的图像。

Demo: 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;
}

Script:

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 );
    }
} );

Output:

#2

Instead of having an image in that lens div, try applying it as a background-image on the container. Background images seem to be friendlier with Chrome border-radii than img tags.

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

#3

OK, to redeem myself, I think that this can be fixed in chrome by nesting the image inside another div. In Chrome the rounded corners will not hide overflow if the div is absolutely position, but if you put in a non-absolutely positioned div and apply the rounded corner css to that and set overflow hidden, it should work OK:

好吧,为了赎回自己,我认为这可以通过将图像嵌套在另一个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>

Something similar here: How to make CSS3 rounded corners hide overflow in Chrome/Opera

类似这里的东西:如何使CSS3圆角隐藏Chrome / Opera中的溢出

#4

The border IS rendered correctly (you can see that by setting the background to red and turning off the image) - the issue is that the image punches through. I think you need to simplify your implementation. Why not just have one div, with the image as background, and no inner div nor image. From this complicated code, with all that CSS

正确渲染边框(您可以通过将背景设置为红色并关闭图像来查看) - 问题在于图像穿透。我认为您需要简化您的实施。为什么不只有一个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>

To

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

with 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;
 }

and have the JS change the background-position and top / left of the #lens element

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

#5

You have a bug with your implementation where it shows the previous zoom.

你的实现有一个错误,它显示了之前的缩放。

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

越野车缩放http://www.vertigrated.com/images/buggyzoom.png