网页前端设计

http://www.86y.org

搜索文章

js图片自动伸缩不变形

用声音读出全文关注我吧
 2012/7/4 12:03:52 阅读次数:10728

js写了个图片自动伸缩不变形的效果,大家可以运行看下效果。 显示图片等比缩小图片不变形

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片自动伸缩实例</title>
<script>
function autoResizepic(Imgc)
{
	//Imgc是包含图片DIV的ID
	var picTarget=document.getElementById(Imgc).getElementsByTagName('img');	
	//alert(picTarget.length);
	var rule_w=635;//最宽图片宽度
	if(picTarget.length>0)
	{
		//alert(picTarget.length);
		for(var i =0;i<picTarget.length;i++)
		{ 
				
				if(picTarget[i].width>rule_w)
					{picTarget[i].height=picTarget[i].height*rule_w/picTarget[i].width;picTarget[i].width=rule_w;}
				if(parseInt(picTarget[i].style.width)>rule_w)
					{picTarget[i].style.height=parseInt(picTarget[i].style.height)*rule_w/parseInt(picTarget[i].style.width);picTarget[i].style.width=rule_w+"px";}	
		}
	}
}
</script>
</head>
<body>
<div id="imgContent" style="width:635px;">
	<img src="http://img77.ph.126.net/h3sl-720eOD3mPOemD5pQg==/3021633874989209077.jpg" />
	<img src="http://xpcolor.com/wallpaper/UploadPic/2007-12/2007122345112476.jpg" />
</div>
<script>
autoResizepic("imgContent");
</script>
</body>
</html>

完(好像运行里面看不到效果。你可以复制到你本地运行下。)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭