Question

我想使用jquery和css实现放大（增加）缩小（缩小）字体

我试了很多插件，但不准确，看看这里是我的代码：

<script type="text/javascript">
var $ = jQuery
var section = '#contents *';
var originalFontSize = $(section).css('font-size');  
function resetFont(){
    $(section).css('font-size', originalFontSize);
}
function increaseFont() {
    $(section).each(function(idx, el){
        var currentFontSize = $(this).css('font-size'),
            currentFontSizeNum = parseFloat(currentFontSize, 10),
            newFontSize = currentFontSizeNum * 1.2;
        $(this).css('font-size', newFontSize);              
    });
}
function decreaseFont(){

    $(section).each(function(idx, el){
        var currentFontSize = $(this).css('font-size');


        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*0.8;

        $(this).css('font-size', newFontSize);        
   });
}
</script>

<div id='contents'>
<div>
Any text here
</div>
</div>
<input type='button' value='zoom' onclick='increaseFont()' />
<input type='button' value='zoom out' onclick='decreaseFont()' />

此处放大一次并缩小一次，看其未恢复正常尺寸

工作小提琴：Fiddle

Answer 1

如上所述，增加百分比，并以相同的百分比减少更改的值不会给出原始值。最好是保持一个因子不变，然后乘以或除以它（除法与乘以1 /因子相同）

此外，代码使用每个代码现在是单个元素，因此我在我的示例中假设您希望单独增加子元素。获取当前字体大小是集中的，其中originalValue每个元素保持在同一时间。

（在我目前的位置，我不能使用jsfiddle，所以我使用了jsbin代替：）

<强> JSBin Demo

var section ;
var factor = 0.8;

function getFontSize(el)
{
    var fs = $(el).css('font-size');    
    if(!el.originalFontSize)el.originalFontSize =fs; //set dynamic property for later reset  
    return  parseFloat(fs);  
}

function setFontSize(fact){
    if(section==null)
       section = $('#contents').find('*')       
       .filter(
         function(){return  $(this).clone()
            .children()
            .remove()
            .end()
            .text().trim().length > 0;
            }); //filter -> exclude all elements without text

    section.each(function(){  
      var newsize = fact ? getFontSize(this) * fact : this.originalFontSize;
      if(newsize) $(this).css('font-size', newsize );      
    }); 
}

function resetFont(){
    setFontSize();
}
function increaseFont() {
    setFontSize(1 / factor);
}
function decreaseFont(){
    setFontSize(factor);
}

使用jquery css放大（增加）缩小（缩小）字体

1 个答案: