【js】【圖片顯示】js控制html頁面顯示圖片方式

時間 2019-11-29

原文原文鏈接

js控制html頁面顯示圖片方式，只須要引入「jquery-1.11.2.min.js」javascript

js：css

/*
引用
<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="width: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);
        }

    } //設置圖片大小, 位置
};

View Code

html：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="width: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="width: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="width:350px;height:300px;background-color:Black;">
        <img style="width: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="width: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>