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

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

WBOY

リリース： 2016-05-16 18:43:33

オリジナル

1292 人が閲覧しました

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 を超えず、元の比率に従って縮小されます。