当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

js图片不变形缩略图

发表于: 2012-11-27   作者:商人shang   来源:转载   浏览:
摘要: <!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
<!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=gbk" />
<title>js图片不变形缩略图</title>
<script>
/** 检测图像属性 */
function CheckProperty(obj) {
var ImgObj=new Image();
ImgObj.src = obj.src;
FileObj=ImgObj;
/*
if(ImgObj.readyState!="complete") //如果图像是未加载完成进行循环检测
{
   setTimeout("CheckProperty(FileObj)",500);
}

ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
*/
//取得图片的宽度
ImgWidth=ImgObj.width
//取得图片的高度
ImgHeight=ImgObj.height;
cut(obj , ImgWidth , ImgHeight);
setCenter(obj);
}
/** 设置图片层的上一层居中 */
function setCenter(obj){
if(navigator.userAgent.indexOf("MSIE") <= 0){
   obj.parentNode.style.display = 'table-cell';
} else {
   obj.parentNode.style.display = 'block';
   obj.parentNode.style.fontSize = obj.parentNode.height*0.873;
   obj.parentNode.style.fontFamily = 'Arial';
}
obj.parentNode.style.verticalAlign = 'middle';
obj.parentNode.style.textAlign   = 'center';
}
/** 裁剪图片 */
function cut(obj , width , height){
if(obj.width > obj.height) {
   obj.width = width*obj.height/height;
} else {
   obj.height = height*obj.width/width;
}
}
</script>
</head>
<body>
<div height="500" style="width:500px;height:500px;border: 3px solid #eee;">
<img src='1.jpg' onload='CheckProperty(this)' width='400' height='300'></div>
</body>
</html>
 

摘自:http://hi.baidu.com/yujuan260/item/41966612ca1907061994ec38

js图片不变形缩略图

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号