指定した領域の画像を比例的に拡大縮小するための JavaScript 実装コード スクリプトハウス統合版 [オリジナル]_画像特殊効果

Script House 統合記事、転載歓迎です。

コードをコピー コードは次のとおりです。

function controlImg(ele,w,h) {
var c=ele.getElementsByTagName("img");
for(var i=0;ivar w0=c[i].clientWidth,h0= c[i ].clientHeight;
var t1=w0/w,t2=h0/h;
if(t1>1||t2>1){
c[i].width=Math.フロア(w0 /(t1>t2?t1:t2));
c[i].height=Math.floor(h0/(t1>t2?t1:t2)); ){
c[i].outerHTML='' innerHTML '< ;/a>'
}
else{
c[i].title="新しいウィンドウで画像を開く";
c[i].onclick=function(e){ window.open (this.src)}
}
}
}
}
window.onload=function(){
controlImg(document.getElementById("content"), 670,980);
}

以前はこのようなコードが必要だったのですが、具体的なアイデアがあまり明確ではなかったので、今日blueideaで見た記事をまとめてみました。
コンテンツ部分の制御には通常、controlImg(document.getElementById("content"),670,980); のコンテンツを使用します。

<img src="http://www.jb51.net/images/logo.gif" alt="指定した領域の画像を比例的に拡大縮小するための JavaScript 実装コード スクリプトハウス統合版 [オリジナル]_画像特殊効果" > 以下に制御する領域を示します。 <div id="dxy"> 元画像 <center><img alt="photoshop 图片调色教程 苍白皮肤的冷酷美女" style="max-width:90%" style="max-width:90%" src="http://files.jb51.net/file_images/photoshop/200910/200910241416206868.jpg"></center> チュートリアルレイヤー: 1. 元の画像を開いてコピーを作成します 2. レイヤー実行＜新規調整レイヤー＜色相・彩度パラメータについては説明しておりません。 3. レイヤー＜新規調整レイヤー＜カーブを実行 4. 色を削除し、不透明度を下げます。 5. レイヤー＜新規調整レイヤー＜明るさ・コントラスト<center><img alt="photoshop 图片调色教程 苍白皮肤的冷酷美女" style="max-width:90%" style="max-width:90%" src="http://files.jb51.net/file_images/photoshop/200910/200910241416206969.jpg"></center>を実行 </div> ここでは制御する必要のない領域を示しますので、参照してください。 元画像 <center><img alt="photoshop 图片调色教程 苍白皮肤的冷酷美女" style="max-width:90%" style="max-width:90%" src="http://files.jb51.net/file_images/photoshop/200910/200910241416206868.jpg"></center> チュートリアルレイヤー: 1. 元の画像を開いてコピーを作成します 2. レイヤー実行＜新規調整レイヤー＜色相・彩度パラメータについては説明しておりません。 3. レイヤー＜新規調整レイヤー＜カーブを実行 4. 色を削除し、不透明度を下げます。 5. レイヤー＜新規調整レイヤー＜明るさ・コントラスト<center><img alt="photoshop 图片调色教程 苍白皮肤的冷酷美女" style="max-width:90%" style="max-width:90%" src="http://files.jb51.net/file_images/photoshop/200910/200910241416206969.jpg"></center>を実行
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]

以下を使用します。 CSS 式を実装する方法は、クライアントの負荷が増加します。test の ID を持つ div があるとします。伸びるの？
次のように CSS を定義するだけです:

コードをコピーします コードは次のとおりです:

#test IMG {
border:0;
margin:0;
max-width:600px;
width:expression(this.width>600?) 600px":this.width);
max-height:450px;
height:expression(this.height>450?"450px":this.height);
}


、画像の幅は 600 を超えず、高さは 450 を超えず、元の比率に従って縮小されます。