cari

Rumah >hujung hadapan web >tutorial js >Gunakan jquery untuk mencapai effect_jquery kaca pembesar

Gunakan jquery untuk mencapai effect_jquery kaca pembesar

WBOY
WBOYasal
2016-05-16 16:38:001573semak imbas

Prinsip Pelaksanaan

Mula-mula, mari terangkan cara mencapai kesan kaca pembesar:

Kaedah 1: Sediakan gambar besar dengan piksel tinggi Apabila tetikus diletakkan pada gambar asal, muatkan dan paparkan kedudukan gambar besar yang sepadan.

Kaedah 2: Besarkan imej asal, iaitu, laraskan panjang dan lebar imej asal.

Di atas kami memperkenalkan dua kaedah untuk mencapai kesan kaca pembesar Seterusnya, kami menggunakan dua kaedah di atas pada pemalam jQuery kami.

Pertama sekali, kita memerlukan elemen img untuk memaparkan objek imej asal, dan bekas sebagai kotak paparan objek imej besar disimpan dalam kotak paparan. Apabila tetikus bergerak ke atas imej asal, bahagian yang sepadan dipaparkan dengan kedudukan mutlak imej besar, mencapai kesan seperti kaca pembesar.

Seterusnya, mari kita tentukan halaman Index.html, pelaksanaan khusus adalah seperti berikut: 

<!DOCTYPE html>
<html>
<head>
<title>放大镜效果</title>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.imageZoom.js"></script>


</head>
<body> 
<div class="magnify">
<div class="large"></div>
<img class="small" src="images/iphone.jpg" width="200" />
</div>

<div class="magnify_02">
<div class="large_02"></div>
<img class="small_02" src="images/img5.jpg" width="400"/>
</div>
<script type="text/javascript">
$(function(){

  $(".magnify").hover(function(){
      $.fn.imageZoom({
    small :"small",
    large : "large",
    magnify: "magnify"
    });

  },function(){})

  $(".magnify_02").hover(function(){
    $.fn.imageZoom({
    small : "small_02",
    large : "large_02",
    magnify: "magnify_02"
    });

  },function(){})

})
</script>
</body>
</html>

gaya css: 

.magnify {width: 200px; margin: 50px auto; position: relative;}
.large {width: 175px; height: 175px;position: absolute;border-radius: 100%;z-index:99;box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);background: url('../images/iphone.jpg') no-repeat;display: none;}
.small { display: block; }

.magnify_02 {width: 400px; margin: 50px auto; position: relative;}
.large_02 {width: 175px; height: 175px;position: absolute;border-radius: 100%;z-index:99;box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);background: url('../images/iphone.jpg') no-repeat;display: none;}
.small_02 { display: block; }

acara alih tetikus
Seterusnya, kami menggunakan pemalam jQuery untuk mencapai kesan kaca pembesar Apabila tetikus bergerak di atas objek kecil, kedudukan imej besar yang sepadan akan dipaparkan dalam objek besar, jadi kita perlu Laksanakan kaedah mendengar untuk acara mousemove.

Laksanakan pemalam jquery.imagezoom.js: 

(function($) {

  $.fn.imageZoom = function(options) {

    var defaults = {
      scaling: 0.3,
      small :"small",
      large : "large",
      magnify:"magnify"


    };

    options = $.extend(defaults, options),
      native_width = 0,
      native_height = 0,
      current_width = 0,
      current_height = 0,

       magnify="."+options.magnify;

       small="."+options.small;
       $small=$(small);

       large="."+options.large;
       $large=$(large);

     $(magnify).mousemove(function(e) {

        var image_object = new Image();

        image_object.src = $small.attr('src');

      if(!+[1,]) {

        native_height = image_object.height;

        native_width = image_object.width; 

        } 
        else {
          image_object.onload = function() {  
          image_object.onload = null;
          native_height = image_object.height;
          native_width = image_object.width;
          }
        }
        current_height = $small.height();
        current_width = $small.width();
        var magnify_offset = $(this).offset();
        var mx = e.pageX - magnify_offset.left;
        var my = e.pageY - magnify_offset.top;

        if (mx < $(this).width() && my <$(this).height() && mx > 0 && my > 0) {

          $large.fadeIn(100);

        } else {
          $large.fadeOut(100);
        }
        if ($large.is(":visible")) {
          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);

Nota: Apabila tetikus bergerak ke objek pembesar, kita perlu mendapatkan kedudukan koordinat relatif tetikus dalam pembesaran Di sini kita mentakrifkan koordinat relatif sebagai (mx, my). koordinat relatif adalah sama dengan (pageX - offsetLeft , pageY - offsetTop).

Sekarang, kita telah memperoleh nilai koordinat tetikus dalam objek pembesar Seterusnya, kita perlu mendapatkan koordinat yang sepadan bagi imej besar Di sini kita mentakrifkan koordinat yang sepadan bagi imej besar sebagai (rx, ry). Kita boleh menggunakan hubungan berkadar Dapatkan nilai (rx,ry).

mx / small.width (lebar imej asal) = rx / native_width (lebar imej besar)

my / small.height (panjang imej asal) = ry / native_height (panjang imej besar)

Melalui perhubungan berkadar di atas, kita tahu bahawa koordinat (rx, ry) bagi imej besar adalah sama dengan (mx/small.widthnative_width, my/small.heightnative_height).

acara roda tetikus
 Terdahulu, kami menggunakan acara mousemove untuk membesarkan imej Di sini kami akan menggunakan acara roda tetikus untuk mencapai kesan pembesaran imej.

Kerana, penyemak imbas yang berbeza mempunyai acara roda tatal yang berbeza. Terdapat tiga jenis utama: onmousewheel (IE 6/7/8), mousewheel (IE9, Chrome, Safari dan Opera) dan DOMMouseScroll (hanya disokong oleh Firefox ini tidak akan diperkenalkan secara terperinci di sini).

Disebabkan perbezaan antara penyemak imbas yang berbeza, untuk mencapai keserasian antara penyemak imbas, kami perlu memantau acara tiga roda di atas (onmousewheel, mousewheel dan DOMMouseScroll Pelaksanaan khusus adalah seperti berikut:

). 

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

Di atas, kami telah melaksanakan kaedah mendengar acara roda yang serasi dengan penyemak imbas yang berbeza Seterusnya, apabila menilai sama ada roda itu naik atau turun, kami juga mesti mempertimbangkan keserasian penyemak imbas arus perdana (IE, Opera, Safari , Firefox, Dalam Chrome), Firefox menggunakan perincian, dan empat kategori lain menggunakan wheelDelta hanya tidak konsisten dalam nilai mereka, yang bermaksud ia mempunyai makna yang sama dan wheelDelta hanya mengambil dua nilai setiap satu, perincian hanya mengambil ±3, dan wheelDelta hanya mengambil masa ±120, di mana Nombor positif mewakili ke atas dan nombor negatif mewakili ke bawah.

Memandangkan kedua-dua perincian dan wheelDelta mempunyai dua nilai yang menunjukkan tatal ke atas atau ke bawah, keserasian antara penyemak imbas yang berbeza boleh dicapai dengan cara berikut: Pelaksanaan khusus adalah seperti berikut: 

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

Di atas, kami telah menangani kaedah pemantauan roda penyemak imbas yang berbeza Apabila pengguna menatal roda, saiz imej asal perlu diubah suai secara dinamik menggulung roda, imej asal adalah Skala Sekadar mengikut nisbah 0.3 Pelaksanaan khusus adalah seperti berikut: 

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

Di atas, kami telah melaksanakan kesan kaca pembesar Apabila kami melayangkan tetikus di atas imej, bahagian imej yang sepadan akan dibesarkan secara automatik, kami boleh melaraskan nisbah pembesaran melalui roda skrol.

Rujukan

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah JavaScript untuk menentukan kemahiran jenis_javascript muat naik failArtikel seterusnya：Kaedah JavaScript untuk menentukan kemahiran jenis_javascript muat naik fail

Artikel berkaitan

Lihat lagi