Question

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

就像一个魅力，但它是我需要的三件事;

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>

非常感谢任何帮助。

Answer 1

对于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。

这有帮助吗？

使用jQuery调整文本大小？

1 个答案: