本文介绍了两种实用的JavaScript方法，用于在网页加载时自动调整图片大小，确保图片不会超出页面边界，提供更好的用户体验。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两种不让图片超出页面的实用js</title>
<script>
/*******第一种方法*******/
function resizepic(thispic)
{
if(thispic.width>550)
{
thispic.width=550;
}
};
/*******第二种方法*******/
function ReSizeAllPic(){
var imgs=getTags(document.getElementById("content"),"img");
for(i=0;i<imgs.length;i++){
var img = imgs[i];
if(img .width>550){
img .height=img .height*550/img .width;
img .width=550;
}
}
}
function getTags(parentobj, tag)
{
if (parentobj == null){
return new Array();
}else if (typeof parentobj.getElementsByTagName != 'undefined'){
return parentobj.getElementsByTagName(tag);
}else if (parentobj.all && parentobj.all.tags){
return parentobj.all.tags(tag);
}else{
return new Array();
}
}
window.onload=ReSizeAllPic;
</script>
</head>
<body >
<img src="http://qqxy.uuu9.com/skin20101130/images/top_bj.jpg" onload=resizepic(this) />
<div id="content">
<img src="http://qqxy.uuu9.com/skin20101130/images/top_bj.jpg" />
<img src="http://qqxy.uuu9.com/skin20101130/images/top_bj.jpg" />
<img src="http://qqxy.uuu9.com/skin20101130/images/top_bj.jpg" />
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
