Đang cố gắng bôi đen mọi thứ bên ngoài div di chuyển

Question

Tôi đã viết một plugin thu phóng di chuột và tôi đang cố gắng tìm ra cách tối thiểu mọi thứ bên ngoài hộp thu phóng di chuột và tự làm cho hộp thu phóng trong suốt, nhưng có một thời gian khó khăn cố gắng tìm ra những gì tôi cần làm cho nó. Tôi có sử dụng độ mờ đục không? Tôi có sử dụng hình nền không?

Ngay bây giờ, nó chỉ hiển thị màu trắng .5 độ mờ trên đầu trang của một màu đen tối hơn opacity bg, nhưng tôi kinda gãi đầu của tôi cố gắng tìm ra điều này. Mọi đề xuất sẽ cực kỳ hữu ích.

Những gì tôi đang cố gắng để làm:

Demo: jsfiddle

Answer 1

Dưới đây là một ví dụ về một giải pháp, nhưng nó đòi hỏi bạn phải thực hiện một vài thay đổi.

Nếu bạn đặt hình thu phóng để có hình nền giống như hình ảnh cơ bản và điều chỉnh vị trí nền của nó bằng css thành âm của vị trí của nó so với hình ảnh ban đầu ... tôi có giải thích đúng không?

http://jsfiddle.net/moopet/Be9AA/

Phần quan trọng là

var left = Math.min(Math.max(relX - 100, 0), $origImg.width() - $zoomBox.width()), 
    top = Math.min(Math.max(relY - 100, 0), $origImg.height() - $zoomBox.height()); 

$zoomBox.css({ 
    left: left, 
    top: top 
}); 

$zoomBox.css({ backgroundPosition: (-left) + "px " + (-top) + "px" }); 

Và tôi đã thiết lập nền tảng của các yếu tố zoom trong CSS cho fiddle, nhưng nếu bạn cần phải làm điều này cho nhiều hình ảnh bạn có thể làm điều đó trong JS bằng cách chỉ cần sao chép thuộc tính src.