jquery图片等比放大和缩放

浏览数：75 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery图片等比放大和缩放</title>
        <script src="../jquery-1.7.2.min.js"></script>
        <style>
            *{ margin:0; padding:0;}
            .autoImg{ width:200px; padding:20px;  box-shadow:0 0 5px rgba(0,0,0,.5);float:left; margin-right:20px;    }
            .autoImg img{cursor:pointer;}
            #mask{ width:100%; height:100%; background:rgba(0,0,0,0.8); position:absolute;  z-index:1;}
            #mask img{ position:relative; z-index:9999; }
            #mask span.prev,#mask span.next{ background:rgba(0,0,0,.8); display:block; color:#fff; width:50px; height:50px; line-height:50px; text-align:center;  position:absolute;top:50%; z-index:}
            #mask span.prev:hover,#mask span.next:hover{ background:#f60;  cursor:pointer;}
            #mask span.prev{ left:0; }
            #mask span.next{ right:0;}
        </style>
    </head>

    <body>
        <script>
            $(function(){
            
            //等比缩放小图
            function autoImgSize(ele){
            var oImgWrap = $(ele).width();
            $(ele).find(‘img‘).each(function(i,e){
            var oImgWidth = $(this).width();
            var oImgHeight = $(this).height();
            if(oImgWidth>oImgWrap){
            var imgNewHeight = (oImgWrap*oImgHeight)/oImgWidth;
            $(this).css({‘height‘:imgNewHeight});
            }
            });
            }
            
            //查看大图
            function vieworiginal(ele){
            var flag = true;
            $(ele).find(‘img‘).bind(‘click‘,function(ev){
            ev.stopPropagation();
            var mask =  $(‘<div id="mask"> <img src=" ‘+this.src+‘ "/></div>‘);
            $(‘body‘).append(mask);
            var winW = $(window).width();
            var winH = $(window).height();
            var thisW =  $(‘#mask‘).find(‘img‘).width();
            var thisH =  $(‘#mask‘).find(‘img‘).height()
            $(‘#mask‘).find(‘img‘).animate({‘left‘:(winW-thisW)/2 ,‘top‘:(winH-thisH)/2},400);
            })
            }
            
            $(document).bind(‘click‘,function(){
            $(‘#mask‘).remove();
            })
            
            //初始化
            vieworiginal(‘.autoImg‘)
            autoImgSize(‘.autoImg‘);
            
            });
        </script>

        <div class="autoImg">
            <img src="http://c.hiphotos.baidu.com/image/pic/item/2e2eb9389b504fc26f244cf3e7dde71191ef6dc9.jpg" />
        </div>

        <div class="autoImg">
            <img src="http://b.hiphotos.baidu.com/image/pic/item/6c224f4a20a4462320b59f619b22720e0cf3d7b1.jpg" />
        </div>


        <div class="autoImg">
            <img src="http://b.hiphotos.baidu.com/image/pic/item/d53f8794a4c27d1e9be388e018d5ad6edcc438c8.jpg" />
        </div>

    </body>

</html>