html - 如何在 Chrome 中制作一个圆形的 Div？

Question

我有这个 div，它在缩放图像时充当镜头。但问题是我想要它是循环的。我为此使用它:

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

问题是它使 div 变成圆形，但不隐藏不属于圆形的图像 Angular ，因此显示为矩形。

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

点击沙漠图片，可以看到右边大图的放大效果。如果你给镜头 div border 1px solid red 然后你可以看到 div 实际上是圆形的但是它不隐藏图像中无用的部分。

有什么想法吗？

Answer 1

如果您在具有 border-radius 的元素中有一个图像设置，而你想隐藏图像的“Angular 落”，你需要设置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 );
    }
} );

输出: