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" ...
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="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：
<!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>
View Code
