JavaScript图片等比例缩放

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    function Test() { }
    Test.prototype = {
        zoomImg: function () {
            var imgObj = $("#imgList").find("img");
            $.each(imgObj, function (index) {
                var width = $("#imgDiv_" + index + "").width();
                var height = $("#imgDiv_" + index + "").height();
                var img = new Image();
                img.src = imgObj[index].src;
                var w = img.width;
                var h = img.height;
                if (w >= width) {
                    height = (width * h) / w;
                }
                if (h >= height) {
                    width = (height * w) / h;
                }
                $("#imgDiv_" + index + "").find("img").css("width", width);
                $("#imgDiv_" + index + "").find("img").css("height", height);
            });
        }
    }
    $(function () {
        Test.prototype.zoomImg();
    });
</script>

  

<div id="imgList" style="width:1000px; height:400px;">
    <div id="imgDiv_0" style="height:400px;width:800px; border:1px solid #e5e5e5;">
        <img src="/images/a.jpg" />
    </div>
    <div id="imgDiv_1" style="height:400px;width:800px; border:1px solid #e5e5e5;">
        <img src="/images/a.jpg" />
    </div>
    <div id="imgDiv_2" style="height:400px;width:800px; border:1px solid #e5e5e5;">
        <img src="/images/a.jpg" />
    </div>
    <div id="imgDiv_3" style="height:400px;width:800px; border:1px solid #e5e5e5;">
        <img src="/images/a.jpg" />
    </div>
    <div id="imgDiv_4" style="height:400px;width:800px; border:1px solid #e5e5e5;">
        <img src="/images/a.jpg" />
    </div>
    <div id="imgDiv_5" style="height:400px;width:800px; border:1px solid #e5e5e5;">
        <img src="/images/a.jpg" />
    </div>
</div>

  

posted @ 2017-05-22 19:38  字里行间  阅读(132)  评论(0编辑  收藏  举报