基于jQuery悬停图片变色放大特效

分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

 <div style="width: 620px; margin: 40px auto 0 auto;">    <div class="img">      <div class="inner">        <div>          <img src='/images/loading.gif' data-original="image/1-1.jpg" /></div>        <div>          <img src='/images/loading.gif' data-original="image/1-2.jpg" /></div>      </div>    </div>    <div class="img">      <div class="inner">        <div>          <img src='/images/loading.gif' data-original="image/2-1.jpg" /></div>        <div>          <img src='/images/loading.gif' data-original="image/2-2.jpg" /></div>      </div>    </div>    <div class="img">      <div class="inner">        <div>          <img src='/images/loading.gif' data-original="image/3-1.jpg" /></div>        <div>          <img src='/images/loading.gif' data-original="image/3-2.jpg" /></div>      </div>    </div>    <div class="img">      <div class="inner">        <div>          <img src='/images/loading.gif' data-original="image/4-1.jpg" /></div>        <div>          <img src='/images/loading.gif' data-original="image/4-2.jpg" /></div>      </div>    </div>    <div class="img">      <div class="inner">        <div>          <img src='/images/loading.gif' data-original="image/1-1.jpg" /></div>        <div>          <img src='/images/loading.gif' data-original="image/1-2.jpg" /></div>      </div>    </div>    <div class="img">      <div class="inner">        <div>          <img src='/images/loading.gif' data-original="image/2-1.jpg" /></div>        <div>          <img src='/images/loading.gif' data-original="image/2-2.jpg" /></div>      </div>    </div>  </div>  <script type="text/javascript">    $(".img").mouseenter(function () {      var $this = $(this);      var $div = $this.find(".inner div");      $div.eq(1).stop();      $div.eq(1).css({ "top": "0px", "left": "0px", "width": "200px", "height": "200px" });      $div.eq(0).stop().animate({ "top": "-25px", "left": "-25px", "width": "250px", "height": "250px", "opacity": "0" }, 500);      $div.eq(1).stop().animate({ "top": "-25px", "left": "-25px", "width": "250px", "height": "250px", "opacity": "1" }, 500);    }).mouseleave(function () {      var $this = $(this);      var $div = $this.find(".inner div");      $div.eq(0).stop().animate({ "top": "0", "left": "0", "width": "200px", "height": "200px", "opacity": "1" }, 500);      $div.eq(1).stop().animate({ "top": "0", "left": "0", "width": "200px", "height": "200px", "opacity": "0" }, 500);    });    </script>

原标题：基于jQuery悬停图片变色放大特效

关键词：jquery