Cách tạo Div vòng tròn trong Chrome?

Question

Tôi có số này div hoạt động với ống kính để phóng to hình ảnh. Nhưng vấn đề là tôi muốn nó tròn. Tôi đang sử dụng này cho rằng:

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

Vấn đề là nó làm cho div tròn nhưng không che giấu các góc hình ảnh mà không phải là một phần của vòng tròn và do đó cho thấy một hình chữ nhật.

URL là: http://chokate.maninactionscript.com/chokates/

Bấm vào hình ảnh sa mạc và sau đó xem hình ảnh lớn hơn ở bên phải tác dụng zoom. Nếu bạn đặt ống kính divborder 1pxsolid red thì bạn có thể thấy rằng div thực sự là hình tròn nhưng không che giấu phần vô dụng của hình ảnh.

Bất kỳ ý tưởng nào?

Answer 1

Nếu bạn có một hình ảnh bên trong một phần tử có border-radius bộ, và bạn muốn ẩn "góc" của hình ảnh, bạn cần phải thiết lập border-radius vào hình ảnh để phù hợp.

Nhưng trong trường hợp của bạn sẽ không hoạt động vì hình ảnh của bạn lớn hơn nhiều so với phần tử chứa của bạn. Tốt hơn là sử dụng <div> làm ống kính và đặt background-image để phù hợp với hình ảnh của bạn.

Demo: 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; 
} 

Script:

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); 
    } 
}); 

Output:

Answer 2

OK, để mua lại bản thân mình, tôi nghĩ rằng điều này có thể được khắc phục bằng chrome bằng cách lồng hình ảnh vào một div khác. Trong Chrome các góc tròn sẽ không ẩn tràn nếu div là vị trí hoàn toàn, nhưng nếu bạn đặt div không hoàn toàn vị trí và áp dụng góc tròn css cho điều đó và đặt tràn, nó sẽ hoạt động OK:

<div style='position:absolute'> 
    <div style='-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;overflow:hidden'> 
     <img src='' /> 
    </div> 
</div> 

Một cái gì đó tương tự ở đây: How to make CSS3 rounded corners hide overflow in Chrome/Opera

Answer 3

Thay vì có hình ảnh trong ống kính đó, hãy thử áp dụng nó làm hình nền trên vùng chứa. Hình nền có vẻ thân thiện hơn với bán kính biên giới Chrome hơn thẻ img.

Answer 4

IS biên giới được hiển thị chính xác (bạn có thể thấy điều đó bằng cách đặt nền thành màu đỏ và tắt hình ảnh) - vấn đề là hình ảnh bị xuyên thủng. Tôi nghĩ bạn cần đơn giản hóa việc triển khai của mình. Tại sao không chỉ có một div, với hình ảnh làm nền, và không có div bên trong cũng như hình ảnh. Từ mã phức tạp này, với tất cả CSS mà

<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> 

với 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; 
} 

và có JS thay đổi background-position và trên/bên trái của #lens phần tử

Answer 5

Bạn có lỗi với việc triển khai của mình nơi hiển thị thu phóng trước đó.

buggy zoom http://www.vertigrated.com/images/buggyzoom.png