js 圖片縮放(按比例)控制代碼
更新時間:2009年05月27日 14:44:45 作者:
js 圖片縮放(按比例)實現(xiàn)代碼。
縮放代碼:
縮放代碼:
<script type="text/javascript">
//圖片按比例縮放
var flag = false;
function DrawImage(ImgD, iwidth, iheight) {
//參數(shù)(圖片,允許的寬度,允許的高度)
var image = new Image();
image.src = ImgD.src;
if (image.width > 0 && image.height > 0) {
flag = true;
if (image.width / image.height >= iwidth / iheight) {
if (image.width > iwidth) {
ImgD.width = iwidth;
ImgD.height = (image.height * iwidth) / image.width;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
ImgD.alt = image.width + "×" + image.height;
}
else {
if (image.height > iheight) {
ImgD.height = iheight;
ImgD.width = (image.width * iheight) / image.height;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
ImgD.alt = image.width + "×" + image.height;
}
}
}
</script>
頁面代碼:
<img onload="javascript:DrawImage(this,89,63)" src="http://www.dbjr.com.cn/images/logo.gif" width="89" height="63" border="0" />
覺得不錯的發(fā)個言!
頁面代碼:
1. <img onload="javascript:DrawImage(this,89,63)" src="http://www.baidu.com/img/baidu_logo.gif" width="89" height="63" border="0" />
覺得不錯的發(fā)個言!
復(fù)制代碼 代碼如下:
縮放代碼:
<script type="text/javascript">
//圖片按比例縮放
var flag = false;
function DrawImage(ImgD, iwidth, iheight) {
//參數(shù)(圖片,允許的寬度,允許的高度)
var image = new Image();
image.src = ImgD.src;
if (image.width > 0 && image.height > 0) {
flag = true;
if (image.width / image.height >= iwidth / iheight) {
if (image.width > iwidth) {
ImgD.width = iwidth;
ImgD.height = (image.height * iwidth) / image.width;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
ImgD.alt = image.width + "×" + image.height;
}
else {
if (image.height > iheight) {
ImgD.height = iheight;
ImgD.width = (image.width * iheight) / image.height;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
ImgD.alt = image.width + "×" + image.height;
}
}
}
</script>
頁面代碼:
<img onload="javascript:DrawImage(this,89,63)" src="http://www.dbjr.com.cn/images/logo.gif" width="89" height="63" border="0" />
覺得不錯的發(fā)個言!
頁面代碼:
1. <img onload="javascript:DrawImage(this,89,63)" src="http://www.baidu.com/img/baidu_logo.gif" width="89" height="63" border="0" />
覺得不錯的發(fā)個言!
您可能感興趣的文章:
- JS+css 圖片自動縮放自適應(yīng)大小
- JavaScript 圖片放大鏡(可拖放、縮放效果)
- js 圖片等比例縮放代碼
- 關(guān)于圖片按比例自適應(yīng)縮放的js代碼
- JS 圖片縮放效果代碼
- JavaScript實現(xiàn)網(wǎng)頁圖片等比例縮放實現(xiàn)代碼及調(diào)用方式
- JS網(wǎng)頁圖片按比例自適應(yīng)縮放實現(xiàn)方法
- 使用ImageMagick進行圖片縮放、合成與裁剪(js+python)
- javascript圖片自動縮放和垂直居中處理函數(shù)
- THINKPHP+JS實現(xiàn)縮放圖片式截圖的實現(xiàn)
- javascript 實現(xiàn)的完全兼容鼠標(biāo)滾軸縮放圖片的代碼
- JS圖片等比例縮放方法完整示例
相關(guān)文章
Javascript+CSS實現(xiàn)Flash動態(tài)新聞效果(pp原創(chuàng))
Javascript+CSS實現(xiàn)Flash動態(tài)新聞效果(pp原創(chuàng))2008-10-10