Geek Answers Handbook

Html enlarge mouse

I want to have a photo on the site, and when I click, I need a little magnifier enlargement effect.

Can I do this in html with canvas or something else? javascript maybe?

Thank you

+8
javascript html mouseover zoom
source share
5 answers

Canvas is not supported by IE without third-party plugins. You will want to do this in JavaScript. jQuery makes this very simple and clean. Bind handlers for I / O events for the image element that you want to enlarge using .hover() . Binding handlers simply mean that you pass two functions to .hover (), which will be executed when the user logs in and out, respectively. These functions will use animate() , which you can simply pass in a new size.

See the documentation for . animate () and . soaring () . If you're completely new to jQuery, check out the tutorials .

+2
source share

Attach your photo in a div and add Zoom using CSS on the hover. You can increase the z-index when freezing. You can add to CSS below to enlarge / enlarge the image of the enlarged image. If you don't want to reinvent the wheel, check out some jQuery plugin that can do the same in an elegant way with less effort.

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>
+3
source share

You can show the image in a div as a background image and change the position with a little javascript.

Here is a library with some examples: http://www.mind-projects.it/projects/jqzoom/demos.php

+2
source share

I think I found what you want: loupe.js . From what I saw, this is one of the best effects of a magnifier / magnifying glass.

+2
source share

I found some relative example, so visit the following points:

0
source share

More articles:


All Articles