js图片按比例缩放程序代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js图片等比缩放程序代码</title> <style> .image-box { width: 100%; } </style> </head> <body> <h1>js图片等比缩放程序代码</h1> <a href="http://www.baidu.com"> <div class="image-box"> <img class="image-tag" src="https://api.yuanchuangxiaoyuan.com/image.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/qfMmVoEgEk3tjOJMo5U72sdpIHEyC66XibpriaM9WD66MW0mnrb3clXnx5DMPa54ObPwyCYVh2TGN4pNR4LLEkVQ/640?wx_fmt=jpeg"/> </div> <br> <div class="image-box"> <img class="image-tag" src="https://api.yuanchuangxiaoyuan.com/image.php?url=http://images.yunxiaotui.com/FnMA6XHuwOEWZbFx9m1ZL0k4aIB4"/> </div> <br> </a> <br> </body> </html> <script> /** * 定义改变图片样式的对象 * * @param className 图片盒子class名称 * @param aspectRatio 图片高宽比 高度/宽度 */ let changeImageStyle = function (className, aspectRatio) { this.className = className; this.aspectRatio = aspectRatio; }; /** * 设置图片的样式 * * @param imageObj 图片对象 * @param imageWidth 图片实际宽度 * @param imageHeight 图片实际高度 * @param imageBoxWidth 图片盒子宽度 * @param imageBoxHeight 图片盒子高度 */ changeImageStyle.prototype.callback = function (imageObj, imageWidth, imageHeight, imageBoxWidth, imageBoxHeight) { let top = 0; let width = imageBoxWidth; let height = imageBoxWidth * imageHeight / imageWidth; // 设置宽度属性 imageObj.style.width = width + "px"; // 设置高度属性 imageObj.style.height = height + "px"; // 设置定位属性 imageObj.style.position = "absolute"; // 设置top属性 if (height > imageBoxHeight) { top = (imageBoxHeight - height) / 2; } else { top = (height - imageBoxHeight) / 2; } imageObj.style.top = top + "px"; }; /** * 获取图片高度和高度的方法 * * @param imageObj 图片对象 * @param imageBoxWidth 图片盒子宽度 * @param imageBoxHeight 图片盒子高度 * @param callback 回调函数 */ changeImageStyle.prototype.getImgNaturalDimensions = function (imageObj, imageBoxWidth, imageBoxHeight, callback) { let image = new Image(); image.src = imageObj.src; image.onload = function () { callback(imageObj, image.width, image.height, imageBoxWidth, imageBoxHeight) }; }; /** * 设置图片盒子的样式 */ changeImageStyle.prototype.setImageBox = function () { let that = this; let imagesBoxObj = document.getElementsByClassName(that.className); if (imagesBoxObj.length > 0) { for (let i = 0; i < imagesBoxObj.length; i++) { let imageObj = imagesBoxObj[i].getElementsByTagName('img'); // 获取宽度属性 let width = imagesBoxObj[i].offsetWidth; // 获取高度属性 let height = imagesBoxObj[i].offsetWidth * that.aspectRatio; // 设置高度属性 imagesBoxObj[i].style.height = height + "px"; // 设置隐藏属性 imagesBoxObj[i].style.overflow = "hidden"; // 设置定位属性 imagesBoxObj[i].style.position = "relative"; // 获取图片高度和高度 that.getImgNaturalDimensions(imageObj[0], width, height, that.callback); } } }; /** * 设置图片样式的入口方法 * * 例如: setImageEntrance('image-box', 9 / 16); */ changeImageStyle.prototype.setImageEntrance = function () { let that = this; // 当页面加载完成时,设置图片样式 window.onload = function () { that.setImageBox(); }; // 当浏览器窗口大小改变时,设置图片样式 window.onresize = function () { that.setImageBox(); } }; let image = new changeImageStyle('image-box', 9 / 16); image.setImageEntrance(); </script>
相关推荐
-
js验证方法isBoolean.js javascript
2019-1-8
-
Node.js文件上传 javascript
2019-1-8
-
序列化form表单 javascript
2019-1-7
-
textarea输入框回车加大高度 javascript
2019-1-7
-
微信自带返回按钮自定义事件 javascript
2019-1-7
-
纯H5 AJAX文件上传加进度条功能 javascript
2019-1-7
-
extend.js javascript
2019-1-8
-
JavScript 日期格式化 javascript
2019-1-7
-
某个时间周期的头天或尾天 javascript
2019-1-7
-
js对象排序 javascript
2019-1-8