jquery 图片手风琴效果

这篇主要是手风琴效果和无缝切换相结合，在Demo里的Demo3.html、Demo4.html。

手风琴原理比较简单，当鼠标经过的时候改变图片的路径，鼠标移到另一张图片时还原路径。

虽然原理简单，但是做的过程中也遇到很多纠结的事。

一起来看代码吧！（很多变量没有给出，请结合Demo js里的ImageSlide.js）

 <li>
      <span style="position: absolute;bottom: 5px;width: 100%;text-align: center;">22222</span>
       <a class="img_b" href="#" Smallimg="images/2_s.jpg" Bigimg="images/2_b.jpg">
            <img alt="" width="150" height="150" src="images/2_s.jpg"/>
       </a>
 </li>

先是用a标签设置Smallimg 和 Bigimg来存图片的路径，因为img的src会改变。

当鼠标经过li的时候我们就改变img的src 把图片变成大图。

 $this.find("li").mouseover(function () {
     var myurl = $(this).find('a').attr("Bigimg"); //获取大图路径
     $(this).css("width",options.bigImgWidth).find('img').attr({src: myurl,width:options.bigImgWidth});
 });

当鼠标移到其他的图片的时候，就应该把上一张图片变小。之前我一直在纠结用什么方式来记录上一次鼠标经过的图片。

后来想了一下觉得用个全局变量来记录比较方便点。

  var  $lastLi；        
  $this.find("li").mouseover(function () {
      if ($lastLi != undefined) {
          var lasturl = $lastLi.find('a').attr("Smallimg");
          $lastLi.css("width",liwidth).find('img').attr({src: lasturl,width:liwidth});
      }
      var myurl = $(this).find('a').attr("Bigimg");
      $(this).css("width",options.bigImgWidth).find('img').attr({src: myurl,width:options.bigImgWidth});
      $lastLi = $(this);
 });

鼠标不移动的时候，图片也应该自动把中间的图片变成大图。

 var $getli = $this.find('li').eq(2);//这里又偷懒了，应该根据显示图片数量来判断中间图片
 var myurl = $getli.find('a').attr("Bigimg");
 $getli.css("width", options.bigImgWidth).find('img').attr({src: myurl, width: options.bigImgWidth});
 $lastLi = $getli;

和图片无缝切换结合就变成一个很好的手风琴效果了。

下篇图片放大

谢谢！

 

版权所有，转载请注明出处，谢谢！