jQuery melaksanakan kaedah mengezum masuk dan keluar imej dengan menatal tetikus (dengan muat turun kod sumber demo)_jquery

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan tatal tetikus untuk mengezum masuk dan keluar imej. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Semasa proses pengeluaran projek, saya menghadapi keperluan sedemikian, jadi saya membangunkan satu dan merekodkannya.

Pertama, anda perlu menentukan elemen html dan gaya css:

<div style="position:relative;">
<asp:Image ID="myImg" runat="server" Width="670px" />
<span style="position:relative;display:none; background:wheat;border:1px solid gray;padding:3px;overflow:hidden;" id="NotificationMsg">滚动鼠标中键，可以放大或者缩小图片</span>
</div>

Dalam gaya ini, saya menetapkan gaya imej kepada 670px Tujuannya adalah untuk mengelakkan imej daripada dipaparkan di luar halaman apabila ia terlalu besar.

Kemudian saya menggunakan pemalam roda tetikus jquery untuk menyelesaikan masalah menatal butang tengah tetikus Berikut ialah kod operasi jquery khusus:

<script type="text/javascript">
$(document).ready(function() {
  var count = 0;
  $("#ctl00_ContentPlaceHolder1_myImg").hover(function(e) {
      var left = e.originalEvent.x || e.originalEvent.layerX || 0; //get the left position
      var top = e.originalEvent.y || e.originalEvent.layerY || 0;  //get the top position
      $("#NotificationMsg").css({ 'position': 'absolute', 'left': left, 'top': top });
      $("#NotificationMsg").css("display", "block");
  }, function() {
    //alert('mouserout');
    $("#NotificationMsg").css("display", "none");
  }).mousewheel(function(event, delta, deltaX, deltaY) {
    count++;
    var height = $(this).attr("height");  //get initial height 
    var width = $(this).attr("width");   // get initial width
    var stepex = height / width;  //get the percentange of height / width
    var minHeight = 150;  // min height
    var tempStep = 50;  // evey step for scroll down or up
    $(this).removeAttr('style');
    if (delta == 1) { //up
      $(this).attr("height", height + count * tempStep);
      $(this).attr("width", width + count * tempStep / stepex);
    }
    else if (delta == -1) { //down
      if (height > minHeight)
        $(this).attr("height", height - count * tempStep);
      else
        $(this).attr("height", tempStep);
      if (width > minHeight / stepex)
        $(this).attr("width", width - count * tempStep / stepex);
      else
        $(this).attr("width", tempStep / stepex);
    }
    event.preventDefault();
    count = 0;
  });
});
</script>

Dalam kod ini, fungsi OriginalEvent digunakan untuk mendapatkan kedudukan tetikus Ia boleh digunakan untuk ujian di bawah IE9 dan firefox:

var left = e.originalEvent.x || e.originalEvent.layerX || 0; //get the left position
var top = e.originalEvent.y || e.originalEvent.layerY || 0;  //get the top position

Kemudian dalam kod, saya melakukan operasi berikut untuk menentukan ketinggian dan lebar awal imej dan nisbah bidang paparan imej (tujuannya adalah untuk mencapai penskalaan yang sama):

var height = $(this).attr("height");  //get initial height 
var width = $(this).attr("width");   // get initial width
var stepex = height / width;  //get the percentange of height / width
var minHeight = 150;  // min height
var tempStep = 50;  // every step for scrolling down or up
$(this).removeAttr('style');

Antaranya, tempStep digunakan terutamanya untuk merealisasikan nilai nisbah yang boleh dikurangkan dan diperbesarkan apabila menatal. Selepas melakukan ini, saya mengalih keluar gaya lebar imej, terutamanya untuk membolehkan zum masuk atau keluar.

if (delta == 1) { //up
  $(this).attr("height", height + count * tempStep);
  $(this).attr("width", width + count * tempStep / stepex);
}
else if (delta == -1) { //down
  if (height > minHeight)
    $(this).attr("height", height - count * tempStep);
  else
    $(this).attr("height", tempStep);
  if (width > minHeight / stepex)
    $(this).attr("width", width - count * tempStep / stepex);
  else
    $(this).attr("width", tempStep / stepex);
}
event.preventDefault();
count = 0;

Perenggan di atas agak mudah ia melibatkan menatal ke atas dan ke bawah untuk menilai, dan kemudian membesarkan atau mengecilkan imej dalam perkadaran yang sama. event.preventDefault() boleh memastikan bahawa halaman tidak akan menatal semasa imej sedang menatal.

Dilampirkan pemalam ini:

Klik di siniMuat turun dari tapak ini.

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Kesan seret JQuery dan ringkasan kemahiran", "ringkasan kemahiran sambungan jQuery" , "ringkasan kesan khas klasik biasa JQuery", "animasi jQuery dan ringkasan penggunaan kesan khas", "ringkasan penggunaan pemilih jquery" dan "jQuery pemalam biasa dan ringkasan penggunaan》

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.