我有这个div在图像缩放时起到一个镜头的作用.但问题是我想要通知.我正在用这个：
-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;
问题是它使得div圆形但不隐藏不是圆的一部分的图像角,因此显示一个矩形.
网址为：http://chokate.maninactionscript.com/chokates/
点击沙漠图片,然后看右侧的放大效果图.如果您给镜头div边框1px固体红色,那么您可以看到div实际上是圆形的,但它并不隐藏图像的无用部分.
有任何想法吗？
解决方法
如果您的图像内有一个边框半径设置的元素,并且要隐藏图像的“角”,则需要在图像上设置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 );
}
} );
输出：
