suchen

Heim >Web-Frontend >js-Tutorial >Jquery implementiert die Mausbewegung zum Vergrößern von Bildern mit der Funktion example_jquery

Jquery implementiert die Mausbewegung zum Vergrößern von Bildern mit der Funktion example_jquery

WBOY
WBOYOriginal
2016-05-16 16:07:421214Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Jquery die Funktion zum Vergrößern von Bildern durch Bewegen der Maus implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Als ich an meiner Abschlussarbeit arbeitete, dachte der Lehrer, nachdem er das Muster gesehen hatte, dass die Bilder der Produkte in meinem Warenkorb zu groß und unansehnlich seien, also bat er mich, sie zu verschönern. Ich habe den Code online überprüft und eine einfache Version geändert.

Jquery wird verwendet, um den Mausstatus zu erhalten. Dies liegt hauptsächlich daran, dass JavaScript die aufgerufene Aktion in das Tag selbst schreiben muss direkt Anhand der ID, Klasse usw. des Tags kann die Auslösebedingung identifiziert und eine direkte Antwort gegeben werden (Baidu Encyclopedia sagt, dass dies ein großer Vorteil von jquery ist. Sie müssen nicht mehr eine Reihe von js in den HTML-Code einfügen Um den Befehl aufzurufen, müssen Sie nur die ID definieren. Das war's.

Der Zweck dieser Technologie besteht darin, beim Durchsuchen von Waren im Warenkorb nur kleine Bilder anzuzeigen und beim Bewegen der Maus große Bilder anzuzeigen. Der Hauptzweck besteht darin, die Benutzererfahrung zu verbessern. Andernfalls wirkt sich die Anzeige von Produktinformationen in einem großen Bild des Warenkorbs direkt auf die Ästhetik der gesamten Webseite aus.

So sieht es in der Umsetzung aus.

Quellcode: 

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

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery verwendet die Post-Methode, um Daten an Instanz_jQuery zu übermittelnNächster Artikel：jQuery verwendet die Post-Methode, um Daten an Instanz_jQuery zu übermitteln

In Verbindung stehende Artikel

Mehr sehen