js图片等比例缩放效果代码

ecshop模板中心在经过测试后为您介绍一个简单方便的js图片等比缩放的代码:

样式:

.tab-box img{max-width:300px; max-height:200px;}

js代码:

<script type="text/javascript" language="javascript">

function imgfix() {

//定义要限制的图片宽高,这个宽高要同style里面定义的相同,小于限定高宽的图片不操作

var widthrestriction = 300;

var heightrestriction = 200;

var allelements = document.getelementsbytagname(‘*’)

for (var i = 0; i < allelements.length; i++)

{

if (allelements[i].classname.indexof(‘tab-box’) >= 0)

{

var imgelements = allelements[i].getelementsbytagname(‘img’);

for (var j=0; j < imgelements.length; j++)

{

if ( imgelements[j].width > widthrestriction || imgelements[j].height > heightrestriction )

{

if ( imgelements[j].width > imgelements[j].height)

{

imgelements[j].height = imgelements[j].height*(widthrestriction/imgelements[j].width);

imgelements[j].width = widthrestriction;

} else

{

imgelements[j].width = imgelements[j].width*(heightrestriction/imgelements[j].height);

imgelements[j].height = heightrestriction;

}

}

if ( imgelements[j].height < heightrestriction )

{

imgelements[j].style.paddingtop = ( heightrestriction -imgelements[j].height ) /2 + "px";

}

} /*for j*/

}

}/*for i*/

}

window.onload = imgfix;

</script>

,用爱生活,你会使自己幸福!用爱工作,你会使很多人幸福!

js图片等比例缩放效果代码

相关文章:

你感兴趣的文章:

标签云: