html zoom na myszy ponad

Question

Chcę mieć zdjęcie na stronie, a kiedy mysz nad, chcę trochę powiększyć efekt powiększenia.

Czy mogę to zrobić w html z płótnem lub czymś podobnym? javascript może?

dziękuję

Answer 1

Płótno nie jest obsługiwane przez IE bez zewnętrznych wtyczek. Będziesz chciał to zrobić w JavaScript. jQuery sprawia, że ​​jest to bardzo łatwe i czyste. Podręczniki obsługi powiązań dla zdarzeń wyświetlania/opuszczania dla elementu obrazu, który chcesz powiększyć, używając .hover(). "Wiążące procedury obsługi" oznaczają po prostu, że przekazujesz dwie funkcje do .hover(), które zostaną wykonane, gdy użytkownik najedzie i wyniesie odpowiednio. Te funkcje będą korzystać z animate(), które można po prostu przekazać nowy rozmiar.

Zapoznaj się z dokumentacją dla .animate() i .hover(). Jeśli jesteś całkowicie nowy w jQuery, check out the tutorials.

Answer 2

można wyświetlać obraz w div jako tło wizerunku i zmienić pozycję z niewielką javascript.

Oto biblioteka z kilkoma przykładami: http://www.mind-projects.it/projects/jqzoom/demos.php

Answer 3

Myślę, że znalazłem to, co chcesz: loupe.js. Z tego, co widziałem, jest to jeden z najlepiej wyglądających efektów lupy/szkła powiększającego.

Answer 4

Umieść swoje zdjęcie w elemencie div i dodaj Zoom przez CSS po najechaniu myszą. Po najechaniu możesz chcieć zwiększyć indeks Z. Możesz dodać do poniższego kodu CSS, aby poprawić wygląd/styl powiększonego zdjęcia. Jeśli nie chcesz odkrywać koła na nowo, wypatruj wtyczki Jquery, która może wykonać to samo w elegancki sposób przy mniejszym wysiłku.

CSS:

#div-1 { 
      position: absolute; 
     } 
#div-1.hover { 
      position: absolute; zoom: 70%; border: solid 1px; z-index:10; 
     } 

jQuery/JavaScript:

  <script type = "text/javascript"> 
$(document).ready(function() { 
$(".div-1").onmouseover(function() { 
    toggle_visibility('div-1'); 
}) 

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if ($(e).hasClass("hover")) { 
     $(e).removeClass("hover"); 
    } else { 
     $($(e)).addClass("hover"); 
     $($(e)).attr({ 
      width: "100%", 
      height: "100%" 
     }); 
    } 
}}); < /script> 

Answer 5

znalazłem jakąś względną przykład, więc odwiedzić te:

1. example in ajax-zoom website.
2. inny example: Zoom Effect (Caribbean),Frame Effect (Mona Lisa),X-Ray Effect (Homer),Print Effect (G5).
3. GOOOOOOOOOGLE :)