PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » js等比例经缩小图片并居中显示

js等比例经缩小图片并居中显示

此文被围观1038日期: 2013-03-19 分类 : 前端设计  标签:  ···
在做产品展示的时候经常要求产品图片等比例缩小并居中显示 来看看根据以前的一个函数进化而来的更完善的js函数: [js] //等比例缩小图片 function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ) { rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ) { param.width = maxWidth; param.height = Math.round(height / rateWidth); }else { param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param; } [/js] 然后这样调用 [js] //图片所在元素的ID var img = document.getElementById('img'); img.onload = function(){ var rect = clacImgZoomParam(100, 100, img.offsetWidth, img.offsetHeight); img.width = rect.width; img.height = rect.height; img.style.marginLeft = rect.left+'px'; img.style.marginTop = rect.top+'px'; } [/js] 经常用到的朋友可以记录转载过去!以并以后查看!

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.