jquery 图片放大

上一篇是关于手风琴效果的，但是有时候我们需要放大的图片大小不规律，想要在屏幕中间显示大图。

图片放大可以做为单独的效果，也可以和其他的效果结合起来。比如Demo 里的Demo5.html是以图片无缝切换和图片放大结合的。

整个效果分为两个部分。

     1、定义遮罩层

 $('.mark').css({
      position: "absolute",
      top: 0,
      backgroundColor: "#777",
      zIndex: 1002,
      left: 0,
      display: " none"
  } )

     当点击图片显示大图的时候把整个屏幕遮罩，改变透明度

function marked() {
        $('.mark').css({
            //height: $(window).height(),
            //width: $(window).width()
            //出现滚动条的时候有问题(2013-11-07)

           height: document.documentElement.scrollHeight,
           width: document.documentElement.scrollWidth
        }).show().animate({opacity: 0.6}, 0);
   }

    2、定义图片在屏幕中间显示。首先要做的是在a标签链接大图片路径

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

获取图片的高宽来判断显示位置，设置图片位置时要在getimg.onload = function () {}里面设置，因为当图片太大时，我们必须要先等它加载完了才知道他的高宽。

  function setImg(url) {
        var getimg = new Image();
        //getimg.src = url;//如果放在这里在IE有问题，点击第一次后就会再也不出现，缓存的原因。把他放到后面（2013-11-07）
        var imgh, imgw;
        getimg.onload = function () {
            imgh = getimg.height;
            imgw = getimg.width;

            var trueW = imgw * (400 / imgh);
            if (imgh > 400) {//如果图片太大，高度设为400，宽度等比例缩小
                $('.imageBox_bg').css({height: 400, width: trueW});
                $('.bigImg').css({height: 400, width: trueW});
            }
            else {
                $('.imageBox_bg').css({height: imgh, width: imgw });
                $('.bigImg').css({height: imgh, width: imgw});
            }
            divCenter(url);
        };
        getimg.src = url;
    }

图片在屏幕中间显示。

    function divCenter(url) {
       // var top = ($(window).height() - $('.imageBox_bg').height()) / 2,
        //    left = ($(window).width() - $('.imageBox_bg').width()) / 2;
         //当出现滚动条的时候就不能再中间显示（2013-11-07）
         var top = ($(window).height() - $('.imageBox_bg').height()) / 2 + $(document).scrollTop(), 
        left = ($(window).width() - $('.imageBox_bg').width()) / 2 + $(document).scrollLeft();

        $('.bigImg').attr("src", url);
        $('.imageBox_bg').css({
            top: top,
            left: left
        }).stop().fadeIn(500);
    }

 在click function里返回值要设为false，不然点击图片的时候会在另一个页面显示图片了。

 $(this).click(function () {
     var url = $(this).attr("href");
     setImg(url);
     marked();
     return false;
});

除了主要的两个部分，还有一些点击大图后隐藏大图，这些代码比较简单，用hide（）函数就可以了。

现在可以把无缝切换和图片放大结合了。效果很不错吧！！

 

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