JavaScript が 3 つのメソッドを使用して画像サイズを変更する方法の詳細な説明
ご存知のとおり、カラフルな Web コースウェアは画像のサポートと切り離せません。画像は Web ページの鮮明さを高めますが、Web ページのサイズも大きくなり、ダウンロード速度も遅くなります。 Web サイトのページ上に適切なサイズで画像を表示する方法は、研究する価値のある問題です。この目的のために、著者は、脚本家がお互いを励まし合うために参考となるように、自身の経験のいくつかを書き留めました。
要件分析: この Web サイトはニュース管理システムを使用しています。ホームページのニュース欄では、画像ファイルを画像ニュース内の画像としてデータベースから呼び出す必要があるため、テキストの折り返しフォームを形成します。レイアウトのニーズに応じて、画像の幅は 200 ピクセルを超えることはできません。
画像を適切なサイズで表示できるようにするという問題は、本質的には、大きな画像を同じ比率で縮小するという問題です。画像の URL から画像のサイズ (幅、高さ) を取得する方法が問題の鍵となります。K>=1 の場合、k=幅/高さは画像の比率値を表すとします。幅は 200 ピクセルを超えてはならず、高さは =1 が幅を制限する限り、K
オプション 1: JavaScript の Image() オブジェクトを使用して画像を動的にロードし、画像の高さと幅を取得します。
<scriptlanguage="JavaScript" type="text/javascript">
<!--varimgObj;function checkImg(theURL){var width,height;var k;imgObj =new Image();
//创建对象；
imgObj.src = theURL;
if (typeof(imgObj) =="object"){if ((imgObj.width != 0) && (imgObj.height != 0)){width=imgObj.width; //是否已取得了图像的宽度；
height=imgObj.height;
//是否已取得了图像的高度；
k=width/height;
//获取图像比例值；
if(k>=1){
if (width>=200){
width=200;
height=width/k;
}}
else
{if (height>=200){
height=200;
width=k?height;
}
}
showimg(theURL,width,height);
}
else
setTimeout("checkImg('" + theURL + "')", 100)
//通过Image对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查。
}
}
functionshowimg(theURL,x,y){document.write("<imgsrc="+theURL+""+"width="+x+""+"height="+y+"border='0'"+""+"align='left'>");} //-->
</script>
<scriptlanguage="javascript">checkImg("Bt0085.jpg");
</script>結果: コードはホームページ ファイル (default.asp) に移植され、サーバー テストに合格すると問題が発生しました。 URLを入力すると、まずブラウザに加工画像が表示され、ツールバーの「戻る」をクリックするとホームページのコンテンツが表示されます。再度テストしたところ、結果は正常でした。写真を更新するたびに同じ現象が発生するか、このウェブサイトを訪問していないコンピュータが開くたびに同じ問題が発生します。
原因分析: Image() オブジェクトの特性は、主に画像のスクロール効果を実現するために使用され、画像間の切り替えに時間遅延が発生しないように、画像を事前にクライアントにダウンロードできます。以下のコードのように、Image オブジェクトの src 属性を使用して画像のパス (URL) を指定すると、images ディレクトリ内の画像 pic2.gif がクライアントにダウンロードされます。 var myImg = newImage();myImg.src = "pic.gif";
このコードは、指定された画像がクライアントのキャッシュ (キャッシュ) にある場合、ブラウザーにサーバーからのダウンロードを強制的に開始します。自動的に上書きされます。そうすることで、ユーザーが画像上でマウスを移動すると、画像は遅延なく即座に変化します。そのため、最初に画像を表示すると、2 回目からは正常にホームページ ファイルが表示されるようになります。このことから、Image() オブジェクトを使用して画像のプロパティを取得することはできないため、問題の解決策を変更する必要があるという結論に達しました。
オプション 2: の ID を使用して画像の幅と高さを定義します
ページの 要素は、その表示範囲、つまり、画像の高さと幅 (幅) を定義できます。画像。処理イベントがトリガーされると、グラフの 2 つのプロパティを動的に変更することで効果を実現できます。
<script>
functionshow()
{var w,h;
var k;
var con;
w=smallslot.width;
h=smallslot.height;
k=w/h;
if(k>=1){
if (w>=200){
w=200;
h=w/k;
}}
else
{if(h>=150){
h=150;
w=k?h;
}
}
return w;
}
</script>
<imgborder=0 ID="smallslot" src="4.jpg" onload="javascript:width=x;"align="left">
<script languge="javascript">
varx=show();
</script> このコードでは、処理後の画像の幅をshow()関数の戻り値として使用しています。 onload イベントを使用して、 内の画像の幅を呼び出します。
問題: ホームページの写真ニュースの写真が正常に表示されるようにするには、アドレスバーの「移動」ボタンをクリックします。練習すればまた失敗するよ！なぜなら、インターネット ユーザーが慣れ親しんでいるのは、URL を入力して Enter キーを押すことだけだからです。これに基づいて、作成者は次の試みを行いました: (1)
と の間に「オプション 3: の Onload() イベントを
オプション 2 を注意深く分析した結果、主な理由は次のとおりであることがわかりました。 onload イベントは、いつトリガーされるページ読み込みイベントです。ここで IE が解釈する場合、onload は「javascript:width=x;」をトリガーするためにページを読み込む必要があるため、画像を表示するにはページを再読み込みする必要があります。さらに、Onload() は通常、ページの読み込み時にトリガーされるイベントを事前完了するために
要素で使用されます。そこで、<body onload="window.smallslot.width=show();">
<script>
function show()
{…..
//show()
}
</script>
<img border=0 ID="smallslot"src="1.jpg" align="left">
this is atest! 再次测试，通过了，而且首页调用成功！我成功了！ 经过这次经历，让笔者感受到了从事程序开发工作的艰辛和乐趣！有时为了一个小小的问题折腾得茶饭不思，但成功的喜悦又让人溢于言表。任何事情只要自己能刻苦钻研、持之以恒，相信问题总会得到解决的。
以上がJavaScript が 3 つのメソッドを使用して画像サイズを変更する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7467
15
1376
52
77
11
19
20
Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?
Mar 24, 2024 am 11:27 AM
Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
PHP プログラミング ガイド: フィボナッチ数列を実装する方法
Mar 20, 2024 pm 04:54 PM
プログラミング言語 PHP は、さまざまなプログラミング ロジックやアルゴリズムをサポートできる、Web 開発用の強力なツールです。その中でも、フィボナッチ数列の実装は、一般的で古典的なプログラミングの問題です。この記事では、PHP プログラミング言語を使用してフィボナッチ数列を実装する方法を、具体的なコード例を添付して紹介します。フィボナッチ数列は、次のように定義される数学的数列です。数列の最初と 2 番目の要素は 1 で、3 番目の要素以降、各要素の値は前の 2 つの要素の合計に等しくなります。シーケンスの最初のいくつかの要素
Huawei携帯電話にWeChatクローン機能を実装する方法
Mar 24, 2024 pm 06:03 PM
Huawei 携帯電話に WeChat クローン機能を実装する方法 ソーシャル ソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認する まず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。
Golang がゲーム開発の可能性を可能にする方法をマスターする
Mar 16, 2024 pm 12:57 PM
今日のソフトウェア開発分野では、効率的で簡潔かつ同時実行性の高いプログラミング言語として、Golang (Go 言語) が開発者にますます好まれています。豊富な標準ライブラリと効率的な同時実行機能により、ゲーム開発の分野で注目を集めています。この記事では、ゲーム開発に Golang を使用する方法を検討し、具体的なコード例を通じてその強力な可能性を示します。 1. ゲーム開発における Golang の利点 Golang は静的型付け言語として、大規模なゲーム システムの構築に使用されます。
PHP ゲーム要件実装ガイド
Mar 11, 2024 am 08:45 AM
PHP ゲーム要件実装ガイド インターネットの普及と発展に伴い、Web ゲーム市場の人気はますます高まっています。多くの開発者は、PHP 言語を使用して独自の Web ゲームを開発することを望んでおり、ゲーム要件の実装は重要なステップです。この記事では、PHP 言語を使用して一般的なゲーム要件を実装する方法を紹介し、具体的なコード例を示します。 1. ゲームキャラクターの作成 Web ゲームにおいて、ゲームキャラクターは非常に重要な要素です。ゲームキャラクターの名前、レベル、経験値などの属性を定義し、これらを操作するメソッドを提供する必要があります。
Golangで正確な除算演算を実装する方法
Feb 20, 2024 pm 10:51 PM
Golang で正確な除算演算を実装することは、特に財務計算を含むシナリオや高精度の計算が必要なその他のシナリオでよくあるニーズです。 Golang の組み込みの除算演算子「/」は浮動小数点数に対して計算されるため、精度が失われる場合があります。この問題を解決するには、サードパーティのライブラリまたはカスタム関数を使用して、正確な除算演算を実装します。一般的なアプローチは、math/big パッケージの Rat タイプを使用することです。これは分数の表現を提供し、正確な除算演算を実装するために使用できます。
jsとvueの関係
Mar 11, 2024 pm 05:21 PM
js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンド フレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。
