recherche

Maison >interface Web >js tutoriel >Jquery implémente le mouvement de la souris pour agrandir la fonction d'image example_jquery

Jquery implémente le mouvement de la souris pour agrandir la fonction d'image example_jquery

WBOY
WBOYoriginal
2016-05-16 16:07:421214parcourir

L'exemple de cet article décrit comment Jquery implémente la fonction de zoom sur les images en déplaçant la souris. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Quand je faisais mon projet de fin d'études, après que le professeur ait vu l'échantillon, il a trouvé que les photos des produits dans mon panier étaient trop grandes et inesthétiques, alors il m'a demandé de les embellir. J'ai vérifié le code en ligne et modifié une version simple.

jquery est utilisé et JavaScript n'est pas utilisé pour obtenir l'état de la souris. C'est principalement parce que JavaScript doit écrire l'action appelée dans la balise elle-même. C'est trop gênant, je vais être confus dans un moment. directement Selon l'identifiant, la classe, etc. de la balise, la condition de déclenchement peut être identifiée et une réponse directe peut être effectuée (l'Encyclopédie Baidu dit que c'est un grand avantage de jquery. Vous n'avez plus besoin d'insérer un tas de js dans le code HTML. pour appeler la commande, il suffit de définir l’identifiant (c’est tout).

Le but de l'utilisation de cette technologie est d'afficher uniquement de petites images lors de la navigation dans les produits dans le panier, et d'afficher de grandes images lorsque la souris survole. L'objectif principal est d'améliorer l'expérience utilisateur, sinon l'affichage des informations sur le produit dans une grande image du panier affectera directement l'esthétique de l'ensemble de la page Web.

Voici à quoi cela ressemble une fois mis en œuvre.

Code source : 

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

J'espère que cet article sera utile à la programmation jQuery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery utilise la méthode post pour soumettre des données instance_jqueryArticle suivant：jQuery utilise la méthode post pour soumettre des données instance_jquery

Articles Liés

Voir plus