阅读字体大小设置功能

MrQinjj 2021-11-27 原文


html结构：

<div class="fontSet">
    <i class="aa"></i>
    <div class="text_img"><div class="button"><span>中</span></div></div>
    <i class="aaa"></i>
</div>

js代码：

//设置字体大小
function fize() {
    let left = parseInt($(\'.button\').css(\'left\'))
    console.log(left);
    //字体减
    $(\'.aa\').click(function () {
        let left = parseInt($(\'.button\').css(\'left\'))
         if (left>0){
             console.log(left,"减");
             $(\'.button\').css(\'left\',left-83+"px")

             if (left == 249){
                 $(\'.text-content p\').css({\'font-size\':\'18px\',\'line-height\':\'27px\'});
                 $(\'.text-content a\').css(\'font-size\',\'16px\');
                 $(\'.button span\').html(\'大\')
             }

             if (left == 166){
                 $(\'.text-content p\').css({\'font-size\':\'16px\',\'line-height\':\'25px\'});
                 $(\'.text-content a\').css(\'font-size\',\'14px\');
                 $(\'.button span\').html(\'中\')
             }
             if (left == 83){
                 $(\'.text-content p\').css({\'font-size\':\'14px\',\'line-height\':\'23px\'});
                 $(\'.text-content a\').css(\'font-size\',\'12px\');
                 $(\'.button span\').html(\'小\')
             }
         }
    });
    //字体加
    $(\'.aaa\').click(function () {
        let left = parseInt($(\'.button\').css(\'left\'))
        if (left<249){
            console.log(left,"加");
            $(\'.button\').css(\'left\',left+83+"px")

            if (left == 0){
                $(\'.text-content p\').css({\'font-size\':\'16px\',\'line-height\':\'25px\'});
                $(\'.text-content a\').css(\'font-size\',\'14px\');
               $(\'.button span\').html(\'中\')

            }

            if (left == 83){
                $(\'.text-content p\').css({\'font-size\':\'18px\',\'line-height\':\'27px\'});
                $(\'.text-content a\').css(\'font-size\',\'16px\');
                $(\'.button span\').html(\'大\')
            }
            if (left == 166){
                $(\'.text-content p\').css({\'font-size\':\'20px\',\'line-height\':\'29px\'});
                $(\'.text-content a\').css(\'font-size\',\'18px\');
                $(\'.button span\').html(\'特\')
            }
        }
    })
}
fize()