jQuery實現放大鏡效果

時間  2019-11-06
標籤 jquery 實現 放大鏡 效果 欄目 JQuery 简体版
原文   原文鏈接

1.1.1 摘要

相信你們都見過或使用過放大鏡效果，甚至實現過該效果，它通常應用於放大查看商品圖片，一些電商網站（例如：凡客，京東商城，阿里巴巴等）都有相似的圖片查看效果。javascript

在接下來的博文中，咱們將向你們介紹經過jQuery實現放大鏡效果。css

目錄

1.1.2 正文

實現原理

首先，咱們講解一下放大鏡效果的實現方式：html

方法一：準備一張高像素的大圖，當鼠標放到原圖上，加載顯示大圖的對應位置。html5

方法二：對原圖片進行放大，也就是調整原圖的長和寬。java

上面咱們介紹了經過兩種方式實現放大鏡效果，接下來，咱們將以上的兩種方式應用到咱們的jQuery插件中。jquery

首先，咱們須要一個img元素顯示原圖對象，還須要一個容器做爲顯示框；顯示框裏面存放大圖對象。當鼠標移動到原圖上時，經過對大圖進行絕對定位來顯示對應的部位，實現相似放大鏡的效果。css3

接下來，讓咱們定義Index.html頁面，具體實現以下：git

<!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>

上面，咱們定義了small對象用於顯示原圖，而large對象做爲一個顯示框用來顯示大圖的對應位置。github

mousemove事件

接下來，咱們經過jQuery插件形式來實現放大鏡效果，當鼠標移動到small對象上方時，就會在large對象中顯示大圖的對應位置，這就涉及到mousemove事件了，因此，咱們須要實現mousemove事件的監聽方法（如何定義jQuery插件能夠參考《自定義jQuery插件Step by Step》）。瀏覽器

如今，讓咱們實現jquery.imagezoom.js插件吧！

;
(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
                });
            }

        }
    });
});

上面，我實現了mousemove事件的監聽方法，當鼠標移動到magnify對象中，咱們須要獲取當前鼠標的相對座標位置，下面咱們經過圖片講解如何獲取鼠標的相對座標位置。

相對座標

 imagezoom1 

圖1鼠標相對座標位置

當鼠標移動到magnify對象中，咱們須要獲取鼠標在magnify中的相對座標位置，這裏咱們把相對座標定義爲(mx,my)，經過上圖咱們知道相對座標等於(pageX - offsetLeft, pageY - offsetTop)。

如今，咱們已經獲取鼠標在magnify對象中的座標值，接下來，須要獲取對應大圖的相應座標，這裏咱們把大圖的對應座標定義爲(rx,ry)，咱們能夠經過比例關係獲取(rx,ry)的值。

mx / small.width （原圖的寬）= rx / native_width（大圖的寬）

my / small.height （原圖的長）= ry / native_height（大圖的長）

經過上面的比例關係，咱們知道大圖的座標(rx,ry)等於(mx/small.width*native_width, my/small.height*native_height)。

經過上述的公式，咱們能夠獲取大圖對應座標位置，當鼠標移動到magnify對象中就顯示對應位置的大圖部位，接下來咱們須要實現大圖的加載實現了。

background-position屬性

在實現大圖加載顯示以前，首先介紹CSS中背景定位background-position的知識。

imagezoom2

圖2 CSS background-position

上面，有一個100x100像素的圖片它由四種顏色組成，並且每種顏色佔50 x50像素，接下來，咱們將經過修改該圖片CSS的background-position屬性值來顯示該圖片的不一樣位置。

咱們看到在大正方形下有兩行小正方形，它們顯示的顏色位置都不相同，這裏咱們經過修改每一個div元素CSS的background-position屬性值實現的。

例如：第一行的藍色方形，咱們設置CSS的background-position屬性爲：0px -50px;這至關於原圖往上移動50px，第一行的其餘方形也經過左右和上下移動實現的。

但第二行的方形就顯得更加奇怪了，由於它們都由四種顏色組成，並且顏色的位置都不同，這到底是怎樣實現的呢？

例如：第二行的第一個方形，咱們設置CSS的background-position屬性爲：25px 25px;這至關於原圖向下和向右移動了25px，因爲image wrap的做用它會填充剩餘位置的顏色。

如今，咱們已經瞭解到了CSS的background-position屬性的做用，因此咱們經過修改large對象的background-position屬性來顯示對應的圖像部分，具體實現以下：

$large.css({
    left: px,
    top: py,
    backgroundPosition: bgp
});

上面，咱們經過加載大圖的方式來實現放大鏡效果，接下來，咱們將介紹經過調整原圖的長和寬來實現放大鏡效果。

mousewheel事件

前面，咱們經過mousemove事件來放大圖片，這裏咱們將經過鼠標的滾輪事件實現圖片放大效果。

因爲，不一樣的瀏覽器有不一樣的滾輪事件。主要是有三種：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);

 

imagezoom3 圖3 放大鏡效果

上面，咱們實現了放大鏡效果，當咱們鼠標停留在圖片上方會自動放大圖片的相應部位，固然咱們能夠經過滾輪調整放大的比例。

1.1.3 總結

在本博文中，咱們介紹瞭如何實現放大鏡效果，總的來講，咱們能夠經過兩種方式實現放大鏡效果，並且在博文中都給出了詳細的介紹，經過mousemove事件實現加載大圖的效果，mousewheel事件實現動態修改原圖的尺寸。

這只是一個簡單的程序，咱們還有很大的改善空間，提供一個內容豐富和功能強大的程序是咱們的目標。

參考

Demo

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程