挪动端字体大小调节器完成

2019年8月24日 166次阅读 来源: BingqiChen

近来在一个微信H5项目中须要用到字体大小调治器，就看了一下QQ中的功用，就做了一个类似的，要领也不止一种，而且都不难。

《挪动端字体大小调节器完成》

要领1

html

<div class="wrap">
    <div class="line"></div>
    <ul class="font-adjust">
        <li data-size="14px" class="selected"></li>
        <li data-size="16px"></li>
        <li data-size="18px"></li>
        <li data-size="20px"></li>
        <li data-size="22px"></li>
    </ul>
</div>
<article style="font-size: 14px">
    圣诞已过<br>再加上看过各个大牌出的辣眼睛狗年限制今后<br>我认为将来的几个月应该是没有什么东西<br>能骗到我的钱了<br>直到...看到了ysl的春季限制...<br>我晓得<br>钱包又要完。蛋 。了。
</article>

style

<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}
.wrap {
    position: relative;
    padding: 0 50px;
    border: 1px solid #000;
}
.line {
    width: calc(100% - 100px);
    height: 1px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ccc;
}
.font-adjust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
}
.font-adjust li {
    position: relative;
    list-style: none;
    width: 1px;
    height: 10px;
    background-color: #ccc;
}
.font-adjust li::after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
}
.font-adjust li.selected::after {
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 1px 1px 0 #999;
}
article {
    text-align: center;
}
</style>

我们取得如许的页面：

《挪动端字体大小调节器完成》

javascript

最简朴的单击目标点能够设置对应字体大小：

$('.font-adjust li').on('click', function(e) {
    $('article').attr('style', `font-size: ${$(this).attr('data-size')}`); // 设置字体大小
    $('.font-adjust li').removeClass('selected');
    $(this).addClass('selected');
})

在QQ的字体设置中，只需点击肇端点在调治地区，以后在全部窗口摆布滑动也能够到达调治字体的目标，我这里用的是 touchmove 事宜，利用它返回的位置信息，推断当前间隔哪一个点的程度位置近来，就运用哪一个字体大小，代码以下：

var fontModel = ['14px', '16px', '18px', '20px', '22px']; // 可供挑选的字体序列
var current = 0; // 当前运用的字体在序列中的位置下标
var fontModelsPos = $('.font-adjust li').map(function (index) { // 取得每一个标记点的位置 x
    return $('.font-adjust li').eq(index)[0].offsetLeft;
})

$('.font-adjust').on('touchmove', function (e) {
    e.preventDefault();
    var min = {
        i: 0,
        dis: Math.abs(fontModelsPos[0] - e.changedTouches[0].clientX)
    };
    for(var i = 1; i < 5; i++){ // 取得近来标记点
        var dis = Math.abs(fontModelsPos[i] - e.changedTouches[0].clientX); // 盘算触控点和各标记点的间隔
        if (dis < min.dis) { // 找出近来的谁人
            min = { i: i, dis: dis }
        }
    }
    if (min.i != current) { // 字体大小转变
        current = min.i;
        $('.font-adjust li').removeClass('selected');
        $('.font-adjust li').eq(min.i).addClass('selected');
        $('article').attr('style', `font-size: ${fontModel[min.i]}`)
    }
})

结果：

《挪动端字体大小调节器完成》

要领2

emmmmm，厥后隐隐记得有个元素能够充任这个来调治器来用，是它，是它，就是它：input 。input 中有一个属性 type=”range” ，运用它能够更轻易的完成上述功用。

html

<div class="wrap">
    <input type="range" min="0" max="4" step="1" value="0" id="adjust_font">
    <!-- 以下模仿横线和定位点 -->
    <div class="line"></div>
    <ul class="range-simulate">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

这里照样保留了上面的部份代码（5个定位点和1条横线），由于 input 是没有这些点的，横线能够经由过程变动默许滑轨的款式成为一条细线，然则当滑块在两头时，横线的极点并不在滑块中心，不介意的话题目也不大。

以下的透视图展现的就是极点在滑块正中心：

《挪动端字体大小调节器完成》

style

<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}
.wrap {
    position: relative;
    padding: 10px 50px;
    border: 1px solid #000;
}
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background-color: transparent;
}
input[type=range]::-webkit-slider-runnable-track { // 滑轨
    height: 20px;
}
input[type=range]::-webkit-slider-thumb { // 滑块
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 1px 1px 0 #999;
}
input[type=range]:focus {
    outline: none;
}
.line {
    width: calc(100% - 120px);
    margin: 0 10px;
    height: 1px;
    position: absolute;
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ccc;
}
.range-simulate {
    width: calc(100% - 120px);
    margin: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
}
.range-simulate li {
    position: relative;
    list-style: none;
    width: 1px;
    height: 10px;
    background-color: #ccc;
}
article {
    text-align: center;
}
</style>

javascript

这里的 js 部份就很简朴了，简直是送分题：

var fontModel = ['14px', '16px', '18px', '20px', '22px'];
var article = document.getElementById('article');

document.getElementById('adjust_font').addEventListener('input', function (e) {
    article.setAttribute('style', `font-size: ${fontModel[e.target.value]}`);
}, false);

总结

两种要领完成起来看起来都挺简朴，然则综合斟酌照样第二种要领优先，我斟酌的方面主要有三点：

  • 当各字体的5个标记点不是一条竖线，而是一个圆或许其他外形的时刻，我们须要盘算圆的中心点，而尽人皆知挪动端我们能够会用 rem 或许其他单元，这时刻盘算起来比较辣手了；
  • 在 touchmove 事宜中处理了许多盘算题目，比较斲丧资本，有能够会形成用户体验不佳；
  • touchmove 事宜的兼容性，Safari 暂不支撑，有能够会形成搅扰。

第三点在我现在的项目中，在微信浏览器是不须要斟酌的。

该文章首发于https://blog.bingqichen.me/。

    原文作者：BingqiChen
    原文地址: https://segmentfault.com/a/1190000014087972
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞