シンプルなjQuery画像ズーム - オーバーフローブラウザサイズのウィンドウ

私が取り組んでいる、この小さな画像ズームスクリプトの簡略版をまとめました。シンプルなjQuery画像ズーム - オーバーフローブラウザサイズのウィンドウ

https://jsfiddle.net/cvanderlinden/jjrhgxvv/4/

HTML：

<div class="image-zoom"> 
    <div class="zoom--actions"> 
    <a href="#" class="zoom-in">Zoom In</a> 
    <a href="#" class="zoom-out">Zoom In</a> 
    </div> 
    <div class="zoom--img"> 
    <img src="https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
    </div> 
</div>

JS（jQueryの）：

$('.zoom--actions .zoom-in').on('click', function() { 
     var img = $(this).parents('.image-zoom').find('.zoom--img img'); 
     var width = img.width(); 
     var newWidth = width + 100; 
     img.width(newWidth); 
    } 
); 
$('.zoom--actions .zoom-out').on('click', function() { 
     var img = $(this).parents('.image-zoom').find('.zoom--img img'); 
     var width = img.width(); 
     var newWidth = width - 100; 
     img.width(newWidth); 
    } 
);

意図したとおりにそれが働いて、私が見つけた唯一の問題は、それが唯一でありますウィンドウの幅に達するまで拡大することを望んでいるようですps。それはjsfiddleでは問題にはならないが、実際のブラウザの中では停止する。イメージをブラウザウィンドウの幅を超えて移動させ、スクロールを隠す方法は、オーバーフローを起こさせるだけです。

出典

2017-02-17 Bobby S

CSSルールの一部は、画像拡大に制限しているようです。スタイルを追加すると、 'img { max-width：100％; } 'あなたのフィドルにも同じ効果が得られます。だからあなたはあなたのスタイルシートをチェックするか、ここでそれを提供する必要があります。 https://jsfiddle.net/banzay52/d2jaxbbn/ – Banzay

ありがとうBanzay！それだった！ –

答えに移動しました。 – Banzay

これは、画像拡大のCSSルールの制限のいくつかのようです。あなたのスタイルを追加した場合：あなたのフィドルに

img { max-width: 100%; }

を、あなたは同じ効果を得られます。同様のルールの存在をスタイルシートで調べる必要があります。ここはフィドルのデモですissue

出典

2017-02-17 22:40:57 Banzay

シンプルなCSSはトリックを行います：body{overflow-x: visible;}

出典

2017-02-17 22:24:23

それは私の最初の推測でしたが、何もしていないようです。身体と親要素で試してみました。まだウィンドウの幅で停止します。 –

あなたの質問を理解していない私の答えを編集しました –

残念ながら、同じ結果。 –

-1

私は最高ですが、このコードを試してみませんか？ IDとソースのリンクを入れ替え、ピカチュウのカードイメージをテストに使っています！

<!DOCTYPEhtml> 
 
<html> 
 
<head> 
 
<style> 
 
#pikachu-card { 
 
border: 3px solid black; 
 
} 
 

 
#pikachu-card:hover { 
 
width: 400px; 
 
height: 546px; 
 
border: 6px solid black; 
 
} 
 
</style> 
 
<title> 
 
Test 
 
</title> 
 
</head> 
 
<body> 
 
<h1>Hover to zoom</h1> 
 
<img src="http://cdn.bulbagarden.net/upload/thumb/7/78/PikachuBaseSet58.png/200px-PikachuBaseSet58.png" id="pikachu-card"> 
 
</body> 
 
</html>

出典

2017-02-17 22:45:59 ArbysGenius

これは質問に答えません。 –

シンプルなjQuery画像ズーム - オーバーフローブラウザサイズのウィンドウ

答えて

関連する問題