我有這個div在鏡頭縮放圖像時起鏡頭作用。但問題是我想要它通告。我用這對於：如何在Chrome中製作循環Div？
-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;
的問題是，它使圓形div但不隱藏圖像拐角其不是圓的一部分，因此示出的矩形。
的網址是：http://chokate.maninactionscript.com/chokates/
點擊沙漠圖片，然後看到的變焦效果右側的大圖像。如果你給鏡頭divborder 1pxsolid red那麼你可以看到div實際上是圓形的，但它並不隱藏圖像的無用部分。
任何想法？
如果您具有border-radius組的元素中的圖像，你要隱藏的圖像的「角落」，您需要設置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);
}
});
輸出：
這是一個簡潔的演示，但它似乎只能在Chrome中工作。那是這個意圖嗎？它在Firefox 9.0.1中無法正常工作...... – 2012-01-12 03:06:58
@JonahBishop Ooops：'event.x'。現在已經修復了。 – ThinkingStiff 2012-01-12 03:12:02
令人敬畏的演示。在圖像的右側和底部邊緣有一些奇特的東西，但這是一個精巧的小演示。不錯的工作！ – 2012-01-12 03:15:40
好的，爲了兌換我自己，我認爲這可以通過將圖像嵌套到另一個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>
類似的東西在這裏：How to make CSS3 rounded corners hide overflow in Chrome/Opera
你應該刪除錯誤的答案，以防止更多downvoting他們 – 2012-01-06 20:35:34
而不是在該鏡頭div中的圖像，嘗試應用它作爲容器上的背景圖像。與img標籤相比，Chrome瀏覽器邊框半徑的背景圖片似乎更友好。
邊框呈現正確（您可以看到，通過將背景設置爲紅色並關閉圖像） - 問題是圖像打孔。我認爲你需要簡化你的實現。爲什麼不只有一個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>
要
<div id="lens" style="background-position: -513px -12px; top: 100px; left : 100px;"></div>
與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;
}
，並有JS更換背景位置和頂/左#lens的元素
您的實施有一個錯誤，它顯示了以前的縮放。
你是否已將div的'overflow'屬性設置爲'hidden'？ – 2012-01-06 19:56:39
@BrianDriscoll，'overflow：hidden'不適用於chrome（或其他webkit瀏覽器）中絕對定位元素的圓角。 – 2012-01-06 19:57:38
@ techie_28，這裏有人和你有同樣的問題。他們沒有回答，但他們解決了它：http://stackoverflow.com/questions/5736503/how-to-make-css3-round-corners-hide-overflow-in-chrome-opera – 2012-01-06 19:58:12