phóng to hình ảnh và di chuyển nó với con trỏ trên chuột lên

Question

Xin lỗi nếu điều này có vẻ tầm thường cho tôi để hỏi nhưng ..

Tôi có một số hình ảnh và tôi cần họ để phóng to khi tôi di chuột của tôi qua chúng. Nhưng .. Tôi muốn cho hình ảnh mở rộng để dính bên cạnh con trỏ khi tôi di chuyển nó qua hình ảnh. Tôi không biết phải gọi nó là gì. Tôi khá chắc chắn nó chỉ được thực hiện với javascript, chỉ css sẽ không hoạt động ở đây.

Một cái gì đó như thế này http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/, nhưng bạn biết đấy, nó phải di chuyển với con trỏ đang chuyển động.

Cách hiệu quả nhất để thực hiện việc này là gì?

Answer 1

Những câu trả lời trước đó có thể được chính xác những gì bạn đang tìm kiếm, và bạn đã có thể giải quyết vấn đề này. Nhưng tôi lưu ý rằng bạn đã không đề cập đến jquery bất cứ nơi nào trong bài viết của bạn và tất cả những câu trả lời được xử lý với điều đó. Vì vậy, đối với một giải pháp JS thuần túy ...

Tôi sẽ giả định từ cách câu hỏi được diễn đạt mà bạn đã biết cách bật hình ảnh lên? Điều này có thể được thực hiện bằng cách mã hóa một thẻ img ẩn hoàn toàn được định vị trong html hoặc được tạo khi đang di chuyển với JS. Các cựu có thể được dễ dàng hơn nếu bạn là một người mới JS. Trong ví dụ của tôi, tôi giả sử bạn đã làm một việc tương tự như sau:

<img src="" id="bigImg" style="position:absolute; display:none; visibility:hidden;"> 

Sau đó, bạn cần có chức năng onMouseOver cho hình thu nhỏ của mình.Chức năng này phải làm ba việc:

1) Tải file hình ảnh thực tế vào hình ảnh ẩn

//I'll leave it up to you to get the right image in there. 
document.getElementById('bigImg').src = xxxxxxxx; 

2) Định vị hình ảnh ẩn

//See below for what to put in place of the xxxx's here. 
document.getElementById('bigImg').style.top = xxxxxxxx; 
document.getElementById('bigImg').style.left = xxxxxxxx; 

3) Tận dụng hình ảnh ẩn xuất hiện

document.getElementById('bigImg').style.display = 'block'; 
document.getElementById('bigImg').style.visibility = 'visible'; 

Sau đó, bạn sẽ cần nắm bắt sự kiện onMouseMove và cập nhật hình ảnh không bị ẩn hiện tại Vị trí của e tương ứng bằng cách sử dụng cùng mã mà bạn đã sử dụng ở (2) ở trên để định vị hình ảnh. Điều này sẽ giống như sau:

//Get the mouse position on IE and standards compliant browsers. 
if (!e) var e = window.event; 
if (e.pageX || e.pageY) { 
    var curCursorX = e.pageX; 
    var curCursorY = e.pageY; 
} else { 
    var curCursorX = e.clientX + document.body.scrollLeft; 
    var curCursorY = e.clientY + document.body.scrollTop; 
} 
document.getElementById('bigImg').style.top = curCursorY + 1; 
document.getElementById('bigImg').style.left = curCursorX + 1; 

Và điều đó chỉ cần thực hiện. Chỉ cần thêm một sự kiện onMouseOut để ẩn hình ảnh bigImg một lần nữa. Bạn có thể thay đổi "+1" trong hai dòng cuối cùng thành bất kỳ điều gì bạn muốn đặt hình ảnh chính xác liên quan đến con trỏ.

Lưu ý rằng tất cả mã bên trên chỉ dành cho mục đích trình diễn; Tôi chưa thử nghiệm nó, nhưng nó sẽ giúp bạn đi đúng hướng. Bạn có thể muốn mở rộng thêm ý tưởng này bằng cách tải trước các hình ảnh lớn hơn. Bạn cũng có thể bỏ qua việc bắt các sự kiện mousemove bằng cách sử dụng setTimeout để cập nhật vị trí sau mỗi 20 ms hoặc lâu hơn, mặc dù tôi nghĩ rằng cách tiếp cận đó phức tạp hơn và ít mong muốn hơn. Tôi chỉ đề cập đến nó bởi vì một số nhà phát triển (bao gồm cả tôi khi tôi bắt đầu) có một sự ghê tởm để xử lý sự kiện JS.

Tôi đã làm điều gì đó tương tự như vậy với thẻ ColdFusion tùy chỉnh mà tôi đã viết sẽ tạo ra người dùng div nổi có thể nhấp và kéo xung quanh màn hình. Cùng một nguyên tắc. Nếu bạn cần tôi, tôi có thể đào ra để trả lời thêm bất kỳ câu hỏi nào khác.

Chúc may mắn!

Answer 2

Hãy thử điều này liên kết [jquery with auto positioning]

1.Simple

http://jquery.bassistance.de/tooltip/demo/

2.Good với diễn đàn

http://flowplayer.org/tools/tooltip/index.html

Answer 3

nếu tôi hiểu bạn khắc phục ly bạn muốn định vị hình ảnh lớn của bạn tương đối với con trỏ. Một giải pháp trong jquery (tôi không chắc chắn của mã ở đây 100% nhưng logic là có):

$('.thumb').hover(function(e){ 
    var relativeX = e.pageX - 100; 
    var relativeY = e.pageY - 100; 

    $(.image).css("top", relativeY); 
    $(.image).css("left", relativeX); 
    $(.image).show(); 
}, function(){ 
    $(.image).hide(); 
    }) 

Answer 4

giải pháp Liece là gần, nhưng sẽ không đạt được hiệu quả mong muốn của hình ảnh lớn sau khi con trỏ .

Dưới đây là một giải pháp trong jQuery:

$(document).ready(function() { 
    $("img.small").hover (function() { 
     $("img.large").show(); 
    }, function() { 
     $("img.large").hide(); 
    }); 

    $("img.small").mousemove(function(e) { 
     $("img.large").css("top",e.pageY + 5); 
     $("img.large").css("left",e.pageX + 5); 
    }); 
    }); 

HTML là:

<img class="small" src="fu.jpg"> 
<img class="large" src="bar.jpg"> 

CSS:

img { position: absolute; } 

Answer 5

Jquery là tuyến đường dễ nhất. vị trí tuyệt đối là chìa khóa.

Answer 6

^Ngoài những điều trên, đây là một JS Fiddle đang hoạt động. Lượt truy cập: jsfiddle.net/hdwZ8/1/

Nó đã được chỉnh sửa gần như vậy, nó không chỉ sử dụng thẻ IMG css tổng thể, dễ dàng cho bất kỳ ai sử dụng với điều này ngay bây giờ.

Tôi đang sử dụng tập lệnh này thay vì Hộp đèn trong trang web khách hàng Wordpress của tôi, một hình ảnh được phóng to nhanh bằng chuột là IMO đẹp hơn nhiều. Nó rất dễ dàng để làm cho phòng trưng bày hiệu quả đặc biệt là với AdvancedCustomFields plug-in & trong vòng lặp PHP PHP lặp!