簡單的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 {{0} {0} {0} 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

我是新來的HTML，所以我不是最好的，但試試這個代碼！切換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圖像縮放 - 溢出瀏覽器窗口大小

回答

相關問題