阅读字体大小设置功能


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()
原文地址:https://www.cnblogs.com/MrQinjj/p/12027361.html