如何在Chrome中制作圆形Div？

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在图像上进行设置以匹配.

但在您的情况下,由于您的图像比您的包含元素大得多,因此无效.更好的是使用a <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 );
    }
} );

输出: