使用jQuery调整文字大小？

我发现现场的文本大小调整与jQuery这个伟大的解决方案： http://dev-tips.com/featured/jquery-tip-quick-and-easy-font-resizing 使用jQuery调整文字大小？

工程就像一个魅力，但他们的三件事情是缺少我需要的; A）返回默认的点击选项。上调整 B.）限制（即，仅允许其被调整大小或上下两次 C.）添加多个元件与可调整大小的区域

这里是从上面的例子中我的修改后的代码：

$(document).ready(function() { 
    //Text Zoom 
    $('.controls a').click(function(){ 
    var ourText = $('#content'); 
var currFontSize = ourText.css('fontSize'); 
var finalNum = parseFloat(currFontSize, 10); 
var stringEnding = currFontSize.slice(-2); 
    if(this.id == 'large') { 
    finalNum *= 1.2; 
    } 
    else if (this.id == 'small'){ 
    finalNum /=1.2; 
    } 
    ourText.css('fontSize', finalNum + stringEnding); 
}); 
    });

它减少了这3个问题的效果。我知道“C”。“不应该那么辛苦，但我对jQuery语法不够熟悉，以便添加更多要重新定义大小的元素，而不仅仅是'#content'。不知道如何接近另一个2.控件的标记看起来像这样，你可以从我的JS看到，小型和大型链接通常以“$（'。controls a'）”为目标。click（function（） {”。

<ul id="textzoom"> 
<li class="controls"> 
    <a href="#" id="small" class="smaller" title="zoom out">-</a> 
    <a href="#" class="normal" id="orignal" title="zoom normal">AAA</a> 
    <a href="#" id="large" class="bigger" title="zoom in">+</a> 
</li> 
<li>...</li> 
</ul>

任何帮助，将不胜感激。

来源

2010-08-04 Fuego DeBassi

对于A）和B），你需要存储在一个全局变量的信息（函数的范围之外定义的变量）。只需创建一个“baseFontSize”变量来存储您重置的字体大小和一个可以检查的“fontSizeDelta”变量，确保它永远不会超过“2”或低于“-2”。您可以在.click函数中添加一个针对fontSizeDelta的检查（如果它处于max或min，则立即调用return），并根据需要递增或递减。如果我明白你问的“C”是什么，它只是这一行：

ourText.css('fontSize', finalNum + stringEnding);

重复，但代替“ourText”“$（‘＃desired_element_id’）”，其中desired_element_id，没错，是的id您想要影响的元素。

这有帮助吗？

来源

2010-08-04 21:34:05 ThatSteveGuy

使用jQuery调整文字大小？

回答

相关问题