成人性生交大片免费看vr,国产av午夜精品一区二区入口,99国产精品久久99久久久

1.1.1 摘要

相信大家都見過或使用過放大鏡效果，甚至實現(xiàn)過該效果，它一般應(yīng)用于放大查看商品圖片，一些電商網(wǎng)站（例如：凡客，京東商城，阿里巴巴等）都有類似的圖片查看效果。

在接下來的博文中，我們將向大家介紹通過jQuery實現(xiàn)放大鏡效果。

目錄實現(xiàn)原理 mousemove事件相對坐標(biāo) background-position屬性 mousewheel事件 1.1.2 正文實現(xiàn)原理

首先，我們講解一下放大鏡效果的實現(xiàn)方式：

方法一：準(zhǔn)備一張高像素的大圖，當(dāng)鼠標(biāo)放到原圖上，加載顯示大圖的對應(yīng)位置。

方法二：對原圖片進(jìn)行放大，也就是調(diào)整原圖的長和寬。

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

上面我們介紹了通過兩種方式實現(xiàn)放大鏡效果，接下來，我們將以上的兩種方式應(yīng)用到我們的jQuery插件中。

首先，我們需要一個img元素顯示原圖對象，還需要一個容器作為顯示框；顯示框里面存放大圖對象。當(dāng)鼠標(biāo)移動到原圖上時，通過對大圖進(jìn)行絕對定位來顯示對應(yīng)的部位，實現(xiàn)類似放大鏡的效果。

接下來，讓我們定義Index.html頁面，具體實現(xiàn)如下：

<!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>@@##@@</div></body></html>

登錄后復(fù)制

上面，我們定義了small對象用于顯示原圖，而large對象作為一個顯示框用來顯示大圖的對應(yīng)位置。

mousemove事件

接下來，我們通過jQuery插件形式來實現(xiàn)放大鏡效果，當(dāng)鼠標(biāo)移動到small對象上方時，就會在large對象中顯示大圖的對應(yīng)位置，這就涉及到mousemove事件了，所以，我們需要實現(xiàn)mousemove事件的監(jiān)聽方法（如何定義jQuery插件可以參考《自定義jQuery插件Step by Step》）。

現(xiàn)在，讓我們實現(xiàn)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                });            }        }    });});

登錄后復(fù)制

上面，我實現(xiàn)了mousemove事件的監(jiān)聽方法，當(dāng)鼠標(biāo)移動到magnify對象中，我們需要獲取當(dāng)前鼠標(biāo)的相對坐標(biāo)位置，下面我們通過圖片講解如何獲取鼠標(biāo)的相對坐標(biāo)位置。

相對坐標(biāo)

圖1鼠標(biāo)相對坐標(biāo)位置

當(dāng)鼠標(biāo)移動到magnify對象中，我們需要獲取鼠標(biāo)在magnify中的相對坐標(biāo)位置，這里我們把相對坐標(biāo)定義為(mx,my)，通過上圖我們知道相對坐標(biāo)等于(pageX - offsetLeft, pageY - offsetTop)。

現(xiàn)在，我們已經(jīng)獲取鼠標(biāo)在magnify對象中的坐標(biāo)值，接下來，需要獲取對應(yīng)大圖的相應(yīng)坐標(biāo)，這里我們把大圖的對應(yīng)坐標(biāo)定義為(rx,ry)，我們可以通過比例關(guān)系獲取(rx,ry)的值。

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

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

通過上面的比例關(guān)系，我們知道大圖的坐標(biāo)(rx,ry)等于(mx/small.width*native_width, my/small.height*native_height)。

通過上述的公式，我們可以獲取大圖對應(yīng)坐標(biāo)位置，當(dāng)鼠標(biāo)移動到magnify對象中就顯示對應(yīng)位置的大圖部位，接下來我們需要實現(xiàn)大圖的加載實現(xiàn)了。

background-position屬性

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

圖2 CSS background-position

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

我們看到在大正方形下有兩行小正方形，它們顯示的顏色位置都不相同，這里我們通過修改每個div元素CSS的background-position屬性值實現(xiàn)的。

例如：第一行的藍(lán)色方形，我們設(shè)置CSS的background-position屬性為：0px -50px;這相當(dāng)于原圖往上移動50px，第一行的其他方形也通過左右和上下移動實現(xiàn)的。

但第二行的方形就顯得更加奇怪了，因為它們都由四種顏色組成，而且顏色的位置都不一樣，這究竟是怎樣實現(xiàn)的呢？

例如：第二行的第一個方形，我們設(shè)置CSS的background-position屬性為：25px 25px;這相當(dāng)于原圖向下和向右移動了25px，由于image wrap的作用它會填充剩余位置的顏色。

現(xiàn)在，我們已經(jīng)了解到了CSS的background-position屬性的作用，所以我們通過修改large對象的background-position屬性來顯示對應(yīng)的圖像部分，具體實現(xiàn)如下：

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

登錄后復(fù)制

上面，我們通過加載大圖的方式來實現(xiàn)放大鏡效果，接下來，我們將介紹通過調(diào)整原圖的長和寬來實現(xiàn)放大鏡效果。

mousewheel事件

前面，我們通過mousemove事件來放大圖片，這里我們將通過鼠標(biāo)的滾輪事件實現(xiàn)圖片放大效果。

由于，不同的瀏覽器有不同的滾輪事件。主要是有三種：onmousewheel（IE 6/7/8）、mousewheel（IE9，Chrome，Safari和Opera）和DOMMouseScroll（只有Firefox支持），關(guān)于這三個事件這里不做詳細(xì)的介紹了。

由于不同瀏覽器之間存在著差異，為了實現(xiàn)瀏覽器之間的兼容，所以，我們需要監(jiān)聽以上三種滾輪事件（onmousewheel，mousewheel和DOMMouseScroll），具體實現(xiàn)如下：

$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {});

登錄后復(fù)制

上面，我們實現(xiàn)了兼容不同瀏覽器的滾輪事件監(jiān)聽方法，接下來，判斷滾輪向上或向下也要考慮不同瀏覽器的兼容性，主流的覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個值，detail只取±3，wheelDelta只取±120，其中正數(shù)表示為向上，負(fù)數(shù)表示向下。

由于detail和wheelDelta都有兩個值表示向上或向下滾動，所以不同瀏覽器間可以通過以下方式實現(xiàn)兼容，具體實現(xiàn)如下：

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

登錄后復(fù)制

上面，我們已經(jīng)處理了不同瀏覽器滾輪監(jiān)聽方法，當(dāng)用戶滾動滾輪時需要動態(tài)地修改原圖的尺寸，這里我們定義縮放比scaling為0.3，也就是說每當(dāng)用戶滾動一下滾輪原圖就按0.3的比例進(jìn)行縮放，具體實現(xiàn)如下：

// 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");

登錄后復(fù)制

現(xiàn)在，我們已經(jīng)實現(xiàn)了通過滾輪對圖片進(jìn)行縮放查看的效果，完整的實現(xiàn)如下：

/************************************ 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);

登錄后復(fù)制

圖3 放大鏡效果

上面，我們實現(xiàn)了放大鏡效果，當(dāng)我們鼠標(biāo)停留在圖片上方會自動放大圖片的相應(yīng)部位，當(dāng)然我們可以通過滾輪調(diào)整放大的比例。

1.1.3 總結(jié)

在本博文中，我們介紹了如何實現(xiàn)放大鏡效果，總的來說，我們可以通過兩種方式實現(xiàn)放大鏡效果，而且在博文中都給出了詳細(xì)的介紹，通過mousemove事件實現(xiàn)加載大圖的效果，mousewheel事件實現(xiàn)動態(tài)修改原圖的尺寸。

這只是一個簡單的程序，我們還有很大的改善空間，提供一個內(nèi)容豐富和功能強(qiáng)大的程序是我們的目標(biāo)。

參考 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-css3

Demo

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

jQuery實現(xiàn)放大鏡效果_html/css_WEB-ITnose