【JS】【Demo】 js控制html页面显示图片方式

js控制html页面显示图片方式，只需要引入“jquery-1.11.2.min.js”

js：

/*
引用
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="showImage.js" type="text/javascript"></script>
<script>
$(function () {
showImage.init({Div:"div.showImage"});
});
 
</script>
外层div建议设置宽高，div默认宽度为父级宽度,但高度未知
<div  class="showImage"  style="350px;height:300px;background-color:Black;">
<img style="" src="http://photocdn.sohu.com/20170328/Img485277054.jpg"></img>
</div>
*/
var showImage = {
    item: {
        Div: "div.showImage", //获取外层div的选择器
        Img: "img:eq(0)", //从div子元素 获取图片的选择器
        isCenter: true, //是否居中
        showBeyond: false, //是否显示超出部分
        fixedWH: "delfault", /*固定宽或高: 
                        "delfault"大图图片小边，小图固定图片大边，宽图高图不变大小
                        "abs"取宽高差值最小固定。
                        "width"固定宽。
                        "height" 固定高。*/
        full: false//小图放大充满 外层div

    },
    init: function (item) {
        showImage.item = $.extend({}, showImage.item, item);

        var d = $(showImage.item.Div);
        if (d.length > 0) {

            for (var i = 0; i < d.length; i++) {
                showImage.showImage(d[i]);
            }
        } else {
            showImage.showImage(d[0]);
        }
    },
    showImage: function (obj, width, height) {
        if (obj == undefined) {
            return;
        }
        //obj:外层div对象
        obj = $(obj);
        //超出外层div部分不显示
        if (!showImage.item.showBeyond) {
            obj.css("overflow", "hidden");
        }
        //清除外层div样式，对图片定位样式
        obj.css("padding", "0px 0px 0px 0px");

        //获取div大小
        if (!width) {
            width = obj.get(0).offsetWidth;
        }
        if (!height) {
            height = obj.get(0).offsetHeight;
        }
        if (height <= 0 && width <= 0) {
            return;
        }
        //获取图片
        var img = obj.children(showImage.item.Img).get(0);

        //设置图片大小，位置  

        //图片加载完成
        if (img.complete) {
            showImage.LocationImg(img, width, height);
        } else {
            //图片未加载
            img.onload = function () { showImage.LocationImg(img, width, height); };
        }

    },
    LocationImg: function (img, width, height) {
        img = $(img);
        var img2 = new Image();
        img2.src = img.get(0).src;

        //设置图片大小
        //获取图片宽高
        var imgheight = img2.height;
        var imgwidth = img2.width;

        // var imgheight = img.get(0).offsetHeight;
        // var imgwidth = img.get(0).offsetWidth;
        //        var imgwidth = img.get(0).naturalWidth;
        //        var imgheight = img.get(0).naturalHeight;
        if (!img.complete) {
            // 图片标签尚未加载
            setTimeout(function () {
                //设置图片显示
                showImage.LocationImg(img, width, height);
            }, 1000);
            return;
        }
        //height 外层div高， width 外层div宽
        width = parseFloat(width);
        height = parseFloat(height);
        imgwidth = parseFloat(imgwidth);
        imgheight = parseFloat(imgheight);

        if (width == 0) {
            width = imgwidth;
        }
        if (height == 0) {
            height = imgheight;
        }
        //固定宽或高，另一边等比缩放
        if (showImage.item.fixedWH == "width") {
            //等比缩放高
            imgheight = imgheight * (width / imgwidth);
            //固定宽
            imgwidth = width;
        } else if (showImage.item.fixedWH == "height") {
            //等比缩放宽
            imgwidth = imgwidth * (height / imgheight);
            //固定高
            imgheight = height;
        } else if (showImage.item.fixedWH == "delfault") {
            //大图图片小边，小图固定图片大边，宽图高图不变大小
            if (imgheight >= height && imgwidth >= width) {
                //大图充满
                if (imgheight * (width / imgwidth) >= height) {
                    //等比缩放高
                    imgheight = imgheight * (width / imgwidth);
                    //固定宽
                    imgwidth = width;
                } else {
                    //等比缩放宽
                    imgwidth = imgwidth * (height / imgheight);
                    //固定高
                    imgheight = height;
                }
            } else if (imgheight < height && imgwidth < width) {
                //小图
                if (imgwidth < imgheight) {
                    //等比缩放宽
                    imgwidth = imgwidth * (height / imgheight);
                    //固定高
                    imgheight = height;
                } else if (imgwidth == imgheight) {
                    if (height > width) {
                        //等比缩放高
                        imgheight = imgheight * (width / imgwidth);
                        //固定宽
                        imgwidth = width;
                    } else {
                        //等比缩放宽
                        imgwidth = imgwidth * (height / imgheight);
                        //固定高
                        imgheight = height;
                    }
                } else {
                    //等比缩放高
                    imgheight = imgheight * (width / imgwidth);
                    //固定宽
                    imgwidth = width;
                }
            } else {
                //高图或宽图
                //不变大小，留白
            }
        } else if (showImage.item.fixedWH == "abs") {
            //宽差值，高差值比较
            if (Math.abs(height - imgheight) > Math.abs(width - imgwidth)) {
                //等比缩放高
                imgheight = imgheight * (width / imgwidth);
                //固定宽
                imgwidth = width;
            } else {
                //等比缩放宽
                imgwidth = imgwidth * (height / imgheight);
                //固定高
                imgheight = height;
            }
        }
        //充满 
        if (showImage.item.full) {
            if (imgheight == height && imgwidth < width) {
                //使宽充满
                imgwidth = width * (width / imgwidth);
                imgheight = width;

            } else if (imgheight < height && imgwidth == width) {
                //使高充满
                imgwidth = imgwidth * (height / imgheight);
                imgheight = height;

            }

        }
        //设置图片宽高
        img.css("height", (100 * imgheight / height) + "%");
        img.css("width", (100 * imgwidth / width) + "%");

        //图片定位样式
        img.css("float", "left");
        img.css("position", "relative");
        img.css("bottom", "0px");
        img.css("right", "0px");
        img.css("margin", "0px 0px 0px 0px");
        img.css("padding", "0px 0px 0px 0px");

        if (showImage.item.isCenter) {
            //定位居中
            var toppx = (((100 * (Math.abs(height - imgheight)) / height)) / 2).toFixed(2) + "%";
            var leftpx = (((100 * (Math.abs(imgwidth - width)) / width)) / 2).toFixed(2) + "%";

            if (imgwidth > width) {
                leftpx = "-" + leftpx;
            }
            if (imgheight > height) {
                toppx = "-" + toppx;
            }
            img.css("left", leftpx);
            img.css("top", toppx);
        }

    } //设置图片大小, 位置
};

html：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="showImage.js" type="text/javascript"></script>
    <script>
        $(function () {
            showImage.init({ Div: "div.showImage" });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server" style="padding-left:100px;">
    长图 
    <br />
    <div  class="showImage"  style="100px;height:100px;background-color:Black;">
        <img style="" src="https://test2015data.oss-cn-hangzhou.aliyuncs.com/image-hroot/year20173/image-201730/news/file_170328203053104559.png"></img>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    长图原图
    <br />
    <img style="" src="https://test2015data.oss-cn-hangzhou.aliyuncs.com/image-hroot/year20173/image-201730/news/file_170328203053104559.png"></img>
       <br />
       <br />
    高图
    <br />
    <div  class="showImage"  style="350px;height:300px; background-color:Black;">
        <img style="position:inherit;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490965812249&di=7ec87be2d7b63733a7bba492e952202e&imgtype=0&src=http%3A%2F%2Fwww.shuhua365.com%2Fhualang%2Fuploadfile%2F2010312112959216.jpg"></img>
        
    </div>
    <br />
    高图原图
    <br />
    <img style="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490965812249&di=7ec87be2d7b63733a7bba492e952202e&imgtype=0&src=http%3A%2F%2Fwww.shuhua365.com%2Fhualang%2Fuploadfile%2F2010312112959216.jpg"></img>
  
   
    
    </form>
</body>
    <form id="form1"  style="padding-left:100px;">
    大图
    <br />
    <div  class="showImage"  style="350px;height:300px;background-color:Black;">
        <img style="200px;height:200px;" src="http://photocdn.sohu.com/20170328/Img485277054.jpg"></img>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    大图原图
    <br />
    <img style="" src="http://photocdn.sohu.com/20170328/Img485277054.jpg"></img>
       <br />
       <br />
    小图
    <br />
    <div  class="showImage"  style="350px;height:300px; background-color:Black;">
        <img style="position:inherit;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=512897042,748871735&fm=80&w=179&h=119&img.JPEG"></img>
        
    </div>
    <br />
    小图原图
    <br />
    <img style="" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=512897042,748871735&fm=80&w=179&h=119&img.JPEG"></img>
  
   
    
    </form>
</body>
</html>