Jquery melaksanakan pergerakan tetikus untuk membesarkan fungsi gambar example

Jquery melaksanakan pergerakan tetikus untuk membesarkan fungsi gambar example_jquery

WBOY

Lepaskan： 2016-05-16 16:07:42

asal

1202 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara Jquery melaksanakan fungsi mengezum masuk pada gambar dengan menggerakkan tetikus. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Masa saya buat projek graduasi, lepas cikgu nampak sample, dia rasa gambar produk dalam shopping cart saya terlalu besar dan tak sedap dipandang, jadi dia minta saya cantikkan. Saya menyemak kod dalam talian dan mengubah suai versi mudah.

jquery digunakan, dan JavaScript tidak digunakan untuk mendapatkan status tetikus Ini terutamanya kerana JavaScript perlu menulis tindakan yang dipanggil dalam teg itu sendiri. Saya akan keliru sebentar lagi secara langsung Mengikut id teg, kelas, dsb., keadaan pencetus boleh dikenal pasti dan tindak balas langsung boleh dibuat (Baidu Encyclopedia mengatakan ini adalah kelebihan besar jquery. Anda tidak perlu lagi memasukkan sekumpulan js ke dalam html untuk memanggil arahan, anda hanya perlu mentakrifkan id Itu sahaja).

Tujuan menggunakan teknologi ini adalah untuk memaparkan hanya imej kecil semasa menyemak imbas barangan dalam troli beli-belah, dan memaparkan imej besar apabila tetikus bergolek. Tujuan utama adalah untuk meningkatkan pengalaman pengguna, jika tidak, memaparkan maklumat produk dalam imej besar troli beli-belah secara langsung akan menjejaskan estetika keseluruhan halaman web.

Beginilah rupanya apabila dilaksanakan.

Kod sumber:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>cart</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- 要把jquery-1.9.1.min.js导进去，不导出不来 --> 
<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script language="javascript"> 
$(function(){ 
var size=3.0*$('#image1').width(); 
$("#image1").mouseover(function(event) { 
var $target=$(event.target); 
if($target.is('img')) 
{ 
$("<img id='tip' src='"+$target.attr("src")+"'>").css({ 
"height":size, 
"width":size, 
}).appendTo($("#imgtest"));
/*将当前所有匹配元素追加到指定元素内部的末尾位置。*/ 
} 
}).mouseout(function() { 
$("#tip").remove();/*移除元素*/ 
}) 
}) 
</script> 
 <style type="text/css"> 
  #imgtest{  position:absolute;
         top:100px; 
         left:400px; 
         z-index:1; } 
  table{    left:100px; 
         font-size:20px; }
  </style> 
</head> 
<body> 
<div id="imgtest"></div> 
<br/> 
<br/> 
<table border="1" style="text-align:center;" align="center" >
 <thead style="height:50"> 
  <td style="WIDTH: 300px"> 
    商品名称 
  </td> 
  <td style="WIDTH: 60px"> 
    图片 
  </td> 

  <td style="WIDTH: 170px"> 
    数量 
  </td> 
  <td style="WIDTH: 170px"> 
    价格 
  </td> 
  <td style="WIDTH: 250px"> 
    小计 
  </td> 
 </thead> 
 <tbody> 
   <td class="name"></td> 
   <td class="image">               
   <img src="1.jpg" width="40px" height="40px" id="image1"/>
   </td> 
   <td class="quantity"></td> 
   <td class="price"></td> 
   <td class="total">元  </td> 
   </tr> 
   <tr> 
  <td colspan="4" class="cart_total"> 
  <br></td> 
  <td> 
    <span class="red">总计:</span> 元
  </td> 
   </tr> 
 </tbody> 
</table> 
</body> 
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.