|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
JavaScript自動等比縮放網(wǎng)頁圖片【實例演示/源碼下載】
作者:admin 時間:2022-4-12 18:19:54 瀏覽:在網(wǎng)頁加載的時候，有時我們要對圖片進(jìn)行一點縮放處理，以便能有更佳的顯示效果。為此，本文介紹一個使用JavaScript自動等比縮放網(wǎng)頁圖片的方法，該方法非常實用，代碼簡單易懂，遷移方便。
為方便說明，我們先看如下幾個應(yīng)用實例效果圖。
原圖大小：500x280
圖一大?。?78x100
圖二大小：300x168
圖三大?。?00x168
圖一到圖三的函數(shù)寫法：
$('#div1 img').LoadImage(true, 300, 100, '1.jpg'); //圖一
$('#div2 img').LoadImage(true, 300, 168, '1.jpg'); //圖二
$('#div3 img').LoadImage(true, 300, 200, '1.jpg'); //圖三LoadImage()參數(shù)解釋：
- 第一個參數(shù)true：是否縮放，true表示是，false表示否。
- 第二個參數(shù)width：表示縮放后的最大寬度。
- 第三個參數(shù)height：表示縮放后的最大高度。
- 第四個參數(shù)src：表示原圖地址。
這里特別強(qiáng)調(diào)的是，第二和第三個參數(shù)，是縮放后的最大寬度和最大高度。有時是以寬為基準(zhǔn)進(jìn)行縮放，有時是以高為基準(zhǔn)進(jìn)行縮放，程序在縮放時會自動判斷，確保顯示時不超過任何其中一個數(shù)值。
這就解釋了上面3張圖顯示的寬、高是如何確定的。
完整實例代碼如下
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript自動等比縮放網(wǎng)頁圖片</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
原圖<div><img src="1.jpg"></div><br><br>
圖一<div id="div1"><img src="1.jpg"></div><br><br>
圖二<div id="div2"><img src="1.jpg"></div><br><br>
圖三<div id="div3"><img src="1.jpg"></div>
<script>
/**
* 縮略圖
*
* @param bool isScaling 是否縮放
* @param int width 最大寬度
* @param int height 最大高度
* @param string loadindPic 表示“正在加載中”的圖片地址
*/
jQuery.fn.LoadImage = function (isScaling, width, height, loadindPic) {
if (loadindPic == null) {
loadindPic = "loading.gif";
}
return this.each(function () {
var _this = $(this);
var src = $(this).attr("src")
var img = new Image();
img.src = src;
// 自動縮放圖片
var autoScaling = function () {
if (isScaling) {
if (img.width > 0 && img.height > 0) {
if (img.width / img.height >= width / height) {
if (img.width > width) {
_this.width(width);
_this.height((img.height * width) / img.width);
} else {
_this.width(img.width);
_this.height(img.height);
}
} else {
if (img.height > height) {
_this.height(height);
_this.width((img.width * height) / img.height);
} else {
_this.width(img.width);
_this.height(img.height);
}
}
}
}
}
// 處理ff下會自動讀取緩存圖片
if (img.complete) {
autoScaling();
return;
}
$(this).attr("src", "");
var loading = $("<img alt=\"加載中...\" title=\"圖片加載中...\" src=\"" + loadindPic + "\" />");
_this.hide();
_this.after(loading);
$(img).load(function () {
autoScaling();
loading.remove();
_this.attr("src", this.src);
_this.show();
});
});
}
// 應(yīng)用舉例
$(function () {
$('#div1 img').LoadImage(true, 300, 100, '1.jpg');
$('#div2 img').LoadImage(true, 300, 168, '1.jpg');
$('#div3 img').LoadImage(true, 300, 200, '1.jpg');
})
</script>
</body>
</html>
總結(jié)
本文介紹了JavaScript自動等比縮放網(wǎng)頁圖片的方法，該方法比較實用，它的實用之處在于，它不是先假定了寬的長度或高的長度，然后進(jìn)行等比縮放，而是由我們確定寬和高的最大值，程序根據(jù)這個數(shù)據(jù)進(jìn)行判斷并等比縮放圖片，最后得到的圖片寬度和高度都不會大于參數(shù)傳入的任何一個數(shù)值。
您可能對以下文章也感興趣
相關(guān)文章
x
- 站長推薦
