jQuery implements mouse binding event image zoom function

This time I will bring you jQuery to implement the image magnification function of mouse binding events. What are the precautions for jQuery to implement the image magnification function of mouse binding events. The following is a practical case, let's take a look.

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 implements mouse binding event image zoom function" >
   </a>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00002.jpg" class="lazy" alt="jQuery implements mouse binding event image zoom function" >
   </a>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00003.jpg" class="lazy" alt="jQuery implements mouse binding event image zoom function" >
   </a>
   <a>
    <img  src="/static/imghwm/default1.png" data-src="WR_00004.jpg" class="lazy" alt="jQuery implements mouse binding event image zoom function" >
   </a>
  </p>
  <p></p>
 

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS Basic Improvement Learning Operation DOM Object Style

js Basic Improvement Learning Basic Data Types

The above is the detailed content of jQuery implements mouse binding event image zoom function. For more information, please follow other related articles on the PHP Chinese website!