Home >Web Front-end >HTML Tutorial >jQuery implements magnifying glass effect_html/css_WEB-ITnose
jQuery implements magnifying glass effect_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:33:39931browse
1.1.1 Summary
I believe everyone has seen or used the magnifying glass effect, or even achieved it. It is generally used to magnify product pictures, and some e-commerce websites (such as: Fanke, JD.com) Mall, Alibaba, etc.) all have similar image viewing effects.
In the next blog post, we will introduce you to the magnifying glass effect through jQuery.
Directory implementation principle mousemove event relative coordinates background-position attribute mousewheel event 1.1.2 Text implementation principleFirst, let’s explain how to implement the magnifying glass effect:
Method 1: Prepare a high-pixel photo When the mouse is placed on the original image, the corresponding position of the large image will be loaded and displayed.
Method 2: Enlarge the original image, that is, adjust the length and width of the original image.
Above we introduced two methods to achieve the magnifying glass effect. Next, we apply the above two methods to our jQuery plug-in.
First of all, we need an img element to display the original image object, and a container as a display box; the large image object is stored in the display box. When the mouse moves over the original image, the corresponding part is displayed by absolute positioning of the large image, achieving a magnifying glass-like effect.
Next, let us define the Index.html page, the specific implementation is as follows:
<!doctype html><html lang="en-US"><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery Image Zoom Demo</title> <meta name="author" content="Jackson Huang"></head><body><div class="magnify"><div class="large"></div><img class="small" src="./img/1.jpg" width="700" /></div></body></html>
Above, we defined the small object to display the original image, and the large object as a display box Used to display the corresponding position of the large image.
mousemove eventNext, we use the jQuery plug-in to achieve the magnifying glass effect. When the mouse moves over the small object, the corresponding position of the large image will be displayed in the large object. This involves the mousemove event. , so we need to implement the listening method of the mousemove event (how to define the jQuery plug-in, please refer to "Customizing the jQuery Plug-in Step by Step").
Now, let’s implement the jquery.imagezoom.js plugin!
;(function ($) { $.fn.imageZoom = function (options) { // The native width and height of the image. var native_width = 0, native_height = 0, current_width = 0, current_height = 0, $small = $(".small"), $large = $(".large"); $(".magnify").mousemove(function (e) { /* Act on the event */ if (!native_width && !native_height) { var image_object = new Image(); image_object.src = $small.attr('src'); // Gets the image native height and width. native_height = image_object.height; native_width = image_object.width; // Gets the image current height and width. current_height = $small.height(); current_width = $small.width(); } else { // Gets .maginfy offset coordinates. var magnify_offset = $(this).offset(), // Gets coordinates within .maginfy. mx = e.pageX - magnify_offset.left, my = e.pageY - magnify_offset.top; // Checks the mouse within .maginfy or not. if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { $large.fadeIn(100); } else { $large.fadeOut(100); } if ($large.is(":visible")) { /* Gets the large image coordinate by ratio small.x / small.width = large.x / large.width small.y / small.height = large.y / large.height then we need to keep pointer in the centre, so deduct the half of .large width and height. */ var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1, ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1, bgp = rx + "px " + ry + "px", px = mx - $large.width() / 2, py = my - $large.height() / 2; $large.css({ left: px, top: py, backgroundPosition: bgp }); } } });}); Above, I implemented the listening method of the mousemove event. When the mouse moves to the magnify object, we need to get the relative coordinate position of the current mouse. Below we explain how to get the relative coordinate position of the mouse through pictures. .
Relative coordinates
Figure 1 Relative coordinate position of the mouse
When the mouse moves to the magnify object, we need to get the relative coordinate position of the mouse in the magnify object. Here we put the relative coordinate position of the mouse in the magnify object. The coordinates are defined as (mx, my). From the above figure, we know that the relative coordinates are equal to (pageX - offsetLeft, pageY - offsetTop).
Now, we have obtained the coordinate value of the mouse in the magnify object. Next, we need to obtain the corresponding coordinates of the corresponding large image. Here we define the corresponding coordinates of the large image as (rx, ry). We can Obtain the value of (rx, ry) through the proportional relationship.
mx / small.width (width of the original image) = rx / native_width (width of the large image)
my / small.height (length of the original image) = ry / native_height (large The length of the picture)
Through the above proportional relationship, we know that the coordinates (rx, ry) of the large picture are equal to (mx/small.width*native_width, my/small.height*native_height).
Through the above formula, we can obtain the corresponding coordinate position of the large image. When the mouse moves to the magnify object, the corresponding part of the large image will be displayed. Next, we need to implement the loading of the large image.
background-position attributeBefore implementing the loading and display of large images, first introduce the knowledge of background positioning background-position in CSS.
Figure 2 CSS background-position
Above, there is a 100x100 pixel image composed of four colors , and each color occupies 50 x 50 pixels. Next, we will display different positions of the image by modifying the background-position attribute value of the CSS of the image.
We see that there are two rows of small squares under the big square. They display different colors and positions. Here we achieve this by modifying the background-position attribute value of the CSS of each div element. of.
For example: for the blue square in the first row, we set the background-position property of CSS to: 0px -50px; this is equivalent to moving the original image up 50px, and the other squares in the first row are also moved up by left and right Implemented by moving up and down.
But the squares in the second row are even weirder, because they are composed of four colors, and the positions of the colors are different. How is this achieved?
For example: for the first square in the second row, we set the background-position property of CSS to: 25px 25px; this is equivalent to the original image moving down and to the right by 25px, due to the effect of image wrap. The color that will fill the remaining positions.
Now, we have understood the role of the background-position property of CSS, so we display the corresponding image part by modifying the background-position property of the large object. The specific implementation is as follows:
$large.css({ left: px, top: py, backgroundPosition: bgp}); Above, we achieved the magnifying glass effect by loading a large image. Next, we will introduce how to achieve the magnifying glass effect by adjusting the length and width of the original image.
mousewheel eventEarlier, we used the mousemove event to enlarge the image. Here we will use the mouse wheel event to achieve the image enlargement effect.
由于，不同的浏览器有不同的滚轮事件。主要是有三种：onmousewheel（IE 6/7/8）、mousewheel（IE9，Chrome，Safari和Opera）和DOMMouseScroll（只有Firefox支持），关于这三个事件这里不做详细的介绍了。
由于不同浏览器之间存在着差异，为了实现浏览器之间的兼容，所以，我们需要监听以上三种滚轮事件（onmousewheel，mousewheel和DOMMouseScroll），具体实现如下：
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {}); 上面，我们实现了兼容不同浏览器的滚轮事件监听方法，接下来，判断滚轮向上或向下也要考虑不同浏览器的兼容性，主流的览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。
由于detail和wheelDelta都有两个值表示向上或向下滚动，所以不同浏览器间可以通过以下方式实现兼容，具体实现如下：
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) { // cross-browser wheel delta var e = window.event || e; // old IE support. var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));}); 上面，我们已经处理了不同浏览器滚轮监听方法，当用户滚动滚轮时需要动态地修改原图的尺寸，这里我们定义缩放比scaling为0.3，也就是说每当用户滚动一下滚轮原图就按0.3的比例进行缩放，具体实现如下：
// Gets the image scaling height and width.native_height += (native_height * scaling * delta);native_width += (native_width * scaling * delta);// Update backgroud image size.$large.css('background-size', native_width + "px " + native_height + "px"); 现在，我们已经实现了通过滚轮对图片进行缩放查看的效果，完整的实现如下：
/************************************ Author: Jackson Huang* Blog: http://www.cnblogs.com/rush* Date: 8/23/2013* Reference:* http://www.sitepoint.com/html5-javascript-mouse-wheel/* http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3***********************************/;(function($) { $.fn.imageZoom = function(options) { // The native width and height of the image. var defaults = { scaling: 0.3 }; // Combines object defaults and options. options = $.extend(defaults, options), native_width = 0, native_height = 0, current_width = 0, current_height = 0, $small = $(".small"), $large = $(".large"); $(".magnify").mousemove(function(e) { /* Act on the event */ if (!native_width && !native_height) { var image_object = new Image(); image_object.src = $small.attr('src'); // Gets the image native height and width. native_height = image_object.height; native_width = image_object.width; // Gets the image current height and width. current_height = $small.height(); current_width = $small.width(); } else { // Gets .maginfy offset coordinates. var magnify_offset = $(this).offset(), // Gets coordinates within .maginfy. mx = e.pageX - magnify_offset.left, my = e.pageY - magnify_offset.top; // Checks the mouse within .maginfy or not. if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { $large.fadeIn(100); } else { $large.fadeOut(100); } if ($large.is(":visible")) { /* Gets the large image coordinate by ratio small.x / small.width = large.x / large.width small.y / small.height = large.y / large.height then we need to keep pointer in the centre, so deduct the half of .large width and height. */ var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1, ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1, bgp = rx + "px " + ry + "px", px = mx - $large.width() / 2, py = my - $large.height() / 2; $large.css({ left: px, top: py, backgroundPosition: bgp }); } } }); $(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) { var image_object = new Image(); image_object.src = $large.attr('src'); // cross-browser wheel delta e = window.event || e; // old IE support. var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // Gets the image scaling height and width. native_height += (native_height * defaults.scaling * delta); native_width += (native_width * defaults.scaling * delta); // The image can't smaller than the original. if (native_height < current_height) { native_height = current_height; } if (native_width < current_width) { native_width = current_width; } // console.log("native_height: " + native_height + " native_width: " + native_width); // Gets .maginfy offset coordinates. var magnify_offset = $(this).offset(), mx = e.pageX - magnify_offset.left, my = e.pageY - magnify_offset.top; // Update backgroud image size. $large.css('background-size', native_width + "px " + native_height + "px"); /* Gets the large image coordinate by ratio small.x / small.width = large.x / large.width small.y / small.height = large.y / large.height then we need to keep pointer in the centre, so deduct the half of .large width and height. */ var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1, ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1, bgp = rx + "px " + ry + "px", px = mx - $large.width() / 2, py = my - $large.height() / 2; $large.css({ left: px, top: py, backgroundPosition: bgp }); }); };})(jQuery);
图3 放大镜效果
上面，我们实现了放大镜效果，当我们鼠标停留在图片上方会自动放大图片的相应部位，当然我们可以通过滚轮调整放大的比例。
1.1.3 总结在本博文中，我们介绍了如何实现放大镜效果，总的来说，我们可以通过两种方式实现放大镜效果，而且在博文中都给出了详细的介绍，通过mousemove事件实现加载大图的效果，mousewheel事件实现动态修改原图的尺寸。
这只是一个简单的程序，我们还有很大的改善空间，提供一个内容丰富和功能强大的程序是我们的目标。
参考 http://tech.pro/tutorial/681/css-tutorial-the-background-position-property http://www.sitepoint.com/html5-javascript-mouse-wheel/ http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3Demo