<!-- 引用js脚本 --> <script src="https://www.jb51.net/article/js/imageLoad.js"></script> <script> var imageLoad = new ImageLoad(); //处理网站上所有的图片，下面三种只能使用一种 //imageLoad.initImg("w");//保证宽度一致 //imageLoad.initImg("h");//保证高度一致 //imageLoad.initImg("wh");//铺满显示区域 //处理单个图片，对于多个自己可以写循环语句来实现 imageLoad.setImgSize(document.getElementById("img1"), imageLoad.resetImgSizeW); imageLoad.setImgSize(document.getElementById("img2"), imageLoad.resetImgSizeW); imageLoad.setImgSize(document.getElementById("img3"), imageLoad.resetImgSizeH); imageLoad.setImgSize(document.getElementById("img4"), imageLoad.resetImgSizeH); imageLoad.setImgSize(document.getElementById("img5"), imageLoad.resetImgSizeWH); imageLoad.setImgSize(document.getElementById("img6"), imageLoad.resetImgSizeWH); </script>
ImageLoad源码
$(document).ready(function() { new ImageLoad(); }); ImageLoad = function(){ this.init(); }; ImageLoad.prototype = { init : function () { // this.initImg("w"); }, initImg : function(type) { var _this = this; var imgs = document.getElementsByTagName('img'); for (var i=0; i<imgs.length; i++) { try { var img = imgs[i]; if ("w" == type) { $(img).onload = _this.setImgSize(img, _this.resetImgSizeW); } else if ("h" == type) { $(img).onload = _this.setImgSize(img, _this.resetImgSizeH); } else if ("wh" == type) { $(img).onload = _this.setImgSize(img, _this.resetImgSizeWH); } } catch(e) { } } }, //原始宽度 原始高度 容器宽度 容器高度 //保证高度一致 resetImgSizeH : function(img, nw, nh, w, h) { nwh = nw / nh; wh = w / h; if (nwh > wh) { img.height = h; var width = parseInt(nwh * h); img.width = width; var left = parseInt((width - w) / 2) * -1; img.style.marginLeft = left + "px"; } else if (nwh < wh) { img.height = h; var width = parseInt(nwh * h); img.width = width; var left = parseInt((w - width) / 2); img.style.marginLeft = left + "px"; } else { img.height = h; img.width = w; } }, //原始宽度 原始高度 容器宽度 容器高度 //保证宽度一致 resetImgSizeW : function(img, nw, nh, w, h) { nwh = nw / nh; wh = w / h; if (nwh > wh) { img.width = w; var height = parseInt(1 / nwh * w); img.height = height; var top = parseInt((h - height) / 2); img.style.marginTop = top + "px"; } else if (nwh < wh) { img.width = w; var height = parseInt(1 / nwh * w); img.height = height; var top = parseInt((height - h) / 2) * -1; img.style.marginTop = top + "px"; } else { img.height = h; img.width = w; } }, //原始宽度 原始高度 容器宽度 容器高度 //铺满全屏 resetImgSizeWH : function(img, nw, nh, w, h) { nwh = nw / nh; wh = w / h; if (nwh > wh) { img.height = h; var width = parseInt(nwh * h); img.width = width; var left = parseInt((width - w) / 2) * -1; img.style.marginLeft = left + "px"; } else if (nwh < wh) { img.width = w; var height = parseInt(1 / nwh * w); img.height = height; var top = parseInt((height - h) / 2) * -1; img.style.marginTop = top + "px"; } else { img.height = h; img.width = w; } }, //获取图片真实尺寸以及容器尺寸 setImgSize : function(img, callback) { if (img.naturalWidth) { //html5 callback(img, img.naturalWidth, img.naturalHeight, img.width, img.height); } else { // IE 6 7 8 var imgae = new Image(); image.src = img.src; image.onload = function() { callback(img, image.width, image.height, img.width, img.height); } } }, }
以上所述是小编给大家介绍的使用JavaScript解决网页图片拉伸问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: