css – 如何在Chrome中制作循环Div？

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

如果您的图像内有一个边框半径设置的元素,并且要隐藏图像的“角”,则需要在图像上设置border-radius.

但是在您的情况下,由于您的图像比您的包含元素大得多,因此无法正常工作.更好的是使用< div>作为镜头,并设置背景图像以匹配您的图像.

演示：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 );
    }
} );

输出：