ZOOM画像をセンターjQueryまたはJavaScriptにズームします -- javascript フィールド と jquery フィールド と html フィールド 関連 問題

zoom image to the center jquery or javascript












2
vote

問題

日本語

画像をズームすると右に進むでしょう。これが以下の私のJS機能です。イメージをズームする瞬間のバックグラウンド実幅と高さは、バックグラウンドサイズだけを動的にする必要があります。それがズームしても中央に正しいことになるようになるのが好きな理由です。私が欲しいのはイメージをズームするとき、画像の中央にズームします。

 <コード> function zooms(zoomType) {       switch(zoomType) {         case '+':             newW += 10;             break;         case '-':             newW -= 10;             break     }      if(newW <= 0) {         newW = 0;     } else {         if(newW >= 100) {             newW = 100;         }     }     return newW; }  function backgroundAdjust(num, el) {             wid = (parseInt(num)+parseInt(el.width()));     el.css({         'background-size': wid + 'px auto'     });     return; }  $('input.zoomButton').click(function() {     zoomType = $(this).val();     zoomNum = zooms(zoomType);     backgroundAdjust(zoomNum, $('#uploadImage')); });   
英語

if i zoom the image it will going to the right. here is my js function below. the moment i zoom the image the background actual width and height is constant only the background size should be dynamic. that's the reason why it looks like if it zoom it will going to the right not in the center. what i want is when i zoom the image it zoom it forward to the center of the image.

function zooms(zoomType) {       switch(zoomType) {         case '+':             newW += 10;             break;         case '-':             newW -= 10;             break     }      if(newW <= 0) {         newW = 0;     } else {         if(newW >= 100) {             newW = 100;         }     }     return newW; }  function backgroundAdjust(num, el) {             wid = (parseInt(num)+parseInt(el.width()));     el.css({         'background-size': wid + 'px auto'     });     return; }  $('input.zoomButton').click(function() {     zoomType = $(this).val();     zoomNum = zooms(zoomType);     backgroundAdjust(zoomNum, $('#uploadImage')); }); 
</div
        

回答リスト

1
 
vote
vote
ベストアンサー
 

あなたのイメージが正方形の場合、これは機能するはずです:それは背景画像をオフセットするので、その中心は収容要素の中心に残る。

<事前> <コード> var posx = (el.width()-wid)/2; var posy = (el.height()-wid)/2; el.css({ 'background-size': wid + 'px auto', 'background-position': posx +'px ' +posy +'px' });
 

This should work if your image is square : it offsets the background image so its center remains at the center of the containing element.

var posx = (el.width()-wid)/2; var posy = (el.height()-wid)/2; el.css({         'background-size': wid + 'px auto',         'background-position': posx +'px ' +posy +'px'     }); 
</div
 
 
0
 
vote

私のために働いていたのは、幅と高さを大きくしているのと同じ量の値の半分の値でコンテナ要素をスクロールしていました。これについては、 scrollby を使用できます。例えば。コンテナ要素がELで、画像内部がIMGの場合ズームインするには、現在の 'x' pxと高さの幅と高さを 'y' pxで10%増やしている場合、ズームイン関数は以下のようになります。

<事前> <コード> function zoomIn() { let imgWidth = img.width.replace(/px/g,""); // removing 'px' let imgHeight = img.height.replace(/px/g,""); // removing 'px' let x = imgWidth + (imgWidth*0.1); let y = imgHeight + (imgHeight*0.1); el.scrollBy(x/2, y/2); }
 

What worked for me was scrolling the container element by half the value of same amount you are increasing the width and height of the image. For this you can use scrollBy. Eg. if your container element is el and the image inside is img. Now to zoom-in if you are increasing the width and height by 10% of the current 'x' px and height by 'y' px, Your zoom-in function would look like below:

function zoomIn() {   let imgWidth = img.width.replace(/px/g,"");  // removing 'px'   let imgHeight = img.height.replace(/px/g,"");  // removing 'px'   let x = imgWidth + (imgWidth*0.1);   let y = imgHeight + (imgHeight*0.1);   el.scrollBy(x/2, y/2); } 
</div
 
 

関連する質問

5  CSSのテーブルを垂直方向に揃える方法  ( How to vertically align a table in css ) 
画面の途中でテーブルをCSS?に垂直に揃える方法 ...

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

76  ハイフンのような特殊文字の後に単語を破る方法( - )  ( How to break word after special character like hyphens ) 
比較的単純なCSS: <コード> div { width: 150px; } <コード> <div> 12333-2333-233-23339392-332332323 </div> 文字列が width に制約される...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

635  ユーザーのタイムゾーンを決定します  ( Determine a users timezone ) 
WebサーバーがWebページ内のユーザーのタイムゾーンを決定できるようにするための標準的な方法はありますか? おそらくHTTPヘッダーまたは<コード> Form7 string? ...

31  私は私のウェブサイトをiPhoneのアイコンに与えるのですか?  ( How do i give my websites an icon for iphone ) 
私が作成したWebサイトの iPhone に適切なアイコンを設定する方法は? ...

80  WebサービスからHTML文書を印刷する方法  ( How do i print an html document from a web service ) 
C#WebサービスからHTMLを印刷したいです。 Webブラウザコントロールはオーバーキルであり、サービス環境ではうまく機能しないため、非常に厳しいセキュリティ制約を持つシステムではうまく機能しません。基本的なHTMLページの印刷をサポートする<コード> 9...

273  HTML形式の複数の送信ボタン  ( Multiple submit buttons in an html form ) 
HTMLフォームにウィザードを作成しましょう。 1つのボタンが戻ってき、1つが進みます。 ENTER を押すと、背面ボタンが最初に表示されているので、そのボタンを使用してフォームを送信します。 例: <コード> <form> <!-- Pu...

4  Webの未来は何ですか? XHTML 2、HTML 5、または何か他のもの?  ( Whats the future of the web xhtml 2 html 5 or something else ) 
新しいバージョンのHTMLとXHTMLの新しいバージョンの両方の議論と進歩に混乱しています。彼らは競争相手ですか?もしそうなら、Webの採用された未来になることが最も好意的ですか?そうでなければ、それぞれの競合されていない目的は何ですか? ここではBluray...

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有