放大文本三次，並返回到初始大小

我有鏈接和div元素。點擊鏈接後，我想放大div內的文字。這是可能放大文本三次，第四次大小必須回到初始大小放大文本三次，並返回到初始大小

$('.bigger').click(function() { 
 
    ('#outer-wrap').on('click', function() { 
 
    $(this).css("font-size", "115%") 
 
    }); 
 
})

<a class="bigger" href="#">Some text</a> 
 

 

 
<div id="outer-wrap">paragraph</div>

現在我有類似的東西。有誰能夠幫助我？

來源

2015-12-04 Marcin Kusuah

爲此，您不需要添加一個點擊事件處理程序外包裝。請保留一組您需要的尺寸，併爲當前的點擊次數保存一個變量，並根據點擊鏈接的次數更改尺寸。

var sizes = ["100%","115%","130%","145%"]; 
 
var count = 1; 
 

 
$('.bigger').click(function() { 
 
    $('#outer-wrap').css("font-size", sizes[count]); 
 
    count = (count+1) % 4; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="bigger" href="#">Some text</a> 
 

 

 
<div id="outer-wrap">paragraph</div>

來源

2015-12-04 21:46:47 spaniol6

根據是否需要這些縮放值，您可以將計數用作係數，而不必保留列表。 D'oh，我總是忘記模數運算符，這是一個不錯的選擇 –

@BenPhilipp是的，它取決於Marcin是否需要線性增加文本的大小。如果它不是線性的，我認爲這是更好的，因爲你可以隨意放置任何你想要的每一步。如果它是線性的，那麼係數可能會更好。 – spaniol6

謝謝。這對我很有效！ –

通過我嘗試

var i=0; 
$('.bigger').click(function() { 
    i=(i+1) %4; 
    $('#outer-wrap').css("font-size", (100+15*i)+"%"); 
});

http://jsfiddle.net/svArtist/4hor9p6b/

此週期從0至3，並使用該數目遞增縮放級別（100％，115％，130％，145％）。

這使得它非常優雅，並且更加動態一點（您可以在模數後面更改4而不必更改其他任何內容以更改步數，而增量中的15則可以更改字體的大小每次點擊都會被放大。）

來源

2015-12-04 21:50:09

根據用例，使用count來計算每一步的大小更爲優雅。 +1 – spaniol6

謝謝！在我的情況下，我喜歡大小的數組 –

放大文本三次，並返回到初始大小

回答

相關問題