jQuery implementiert die Bildzoomfunktion für Mausbindungsereignisse

Dieses Mal werde ich Ihnen jQuery vorstellen, um die Bildvergrößerungsfunktion von Mausbindungsereignissen zu implementieren. Was sind die Vorsichtsmaßnahmen für jQuery, um die Bildvergrößerungsfunktion von Mausbindungsereignissen zu implementieren? , lass uns einen Blick darauf werfen.

nbsp;html>


<meta>
<title>jQuery图片变换</title>

<style>
 .show{width:330px; height:auto; margin:50px auto; background:#eee}
 .item{background:#fff; width:300px; height:auto; float:left; margin:15px;}
 p{ padding:15px; color:#ff6600}
 .big-photo img{ width:300px; height:300px; border:1px solid #e0e0e0}
 .des-small img{ width:30px; height:30px;border:1px solid #e0e0e0; }
 .des-small img:hover{ border:1px solid #ff6600}
 .clear{clear:both}
</style>
<script></script>
<script>
 $(function() {
  /** 更换小图片 */
  $(".item a").hover(function(){
   changeImg($(this))
  }); 
 });
 function changeImg(obj){
  if(obj.find("img").attr("alt")=="small"){
   var temp_big_src = obj.siblings(&#39;a&#39;).find(&#39;img[alt=big]&#39;).attr(&#39;src&#39;);
   var temp_big_url = obj.siblings(&#39;a[class=big-photo]&#39;).attr(&#39;href&#39;);
   var temp_small_src = obj.find(&#39;img&#39;).attr(&#39;src&#39;);
   var temp_small_url = obj.attr(&#39;href&#39;);
   obj.siblings(&#39;a&#39;).find(&#39;img[alt=big]&#39;).attr(&#39;src&#39;,temp_small_src);
  }
 }
</script>

 <p>
  </p><p>Jquery实现鼠标移动/移过到商品小图片上时替换掉大图片上的图片</p>
  <p>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00001.jpg" class="lazy" alt="jQuery implementiert die Bildzoomfunktion für Mausbindungsereignisse" >
   </a>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00002.jpg" class="lazy" alt="jQuery implementiert die Bildzoomfunktion für Mausbindungsereignisse" >
   </a>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00003.jpg" class="lazy" alt="jQuery implementiert die Bildzoomfunktion für Mausbindungsereignisse" >
   </a>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00004.jpg" class="lazy" alt="jQuery implementiert die Bildzoomfunktion für Mausbindungsereignisse" >
   </a>
  </p>
  <p></p>
 

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Operation DOM-Objektstil für das Lernen zur grundlegenden Verbesserung von JS

Grundlegende Datentypen für das Lernen zur grundlegenden Verbesserung von JS

Das obige ist der detaillierte Inhalt vonjQuery implementiert die Bildzoomfunktion für Mausbindungsereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!