jquery等比例縮圖

2012-02-23

2145
0
jquery

摘要:jquery等比例縮圖

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script src="jquery-1.4.4.min.js" ></script>
<script>
//圖片縮圖
$(window).load(function(){
   $("img").each(function(i){
        if($(this).attr("alumb")=="true"){
            //移除目前設定的影像長寬
            $(this).removeAttr('width');
            $(this).removeAttr('height');

            //取得影像實際的長寬
            var imgW = $(this).width();
            var imgH = $(this).height();

            //計算縮放比例
            var w=$(this).attr("_w")/imgW;
            var h=$(this).attr("_h")/imgH;
            var pre=1;
            if(w>h){
                pre=h;
            }else{
                pre=w;
            }

            //設定目前的縮放比例
            $(this).width(imgW*pre);
            $(this).height(imgH*pre);
        }
   });
});
</script>
</head>
<body>
<img src="Lighthouse.jpg" alumb="true" _w="100" _h="100" width="500" />
</body>
</html>

回首頁