移动端字体大小调节器的实现

时间：2023-04-02 22:28:15 HTML

*{边距：0;填充：0；边框：无；box-sizing:border-box;}.??wrap{position:relative;填充：050px；border:1pxsolid#000;}.line{width:calc(100%-100px);高度：1px；位置：绝对；顶部：50%；变换：翻译Y(-50%)；背景颜色：#ccc；}.字体调整{显示：flex；证明内容：空格之间；对齐项目：居中；height:50px;}.font-adjustli{position:relative;列表样式：无；宽度：1px；高度：10px；背景颜色：#ccc;}.font-adjustli::after{content:'';显示：块；位置：绝对；宽度：20px；高度：20px；顶部：50%；左：50%；边界半径：50%；转换：翻译（-50%，-50%）；背景颜色：透明；}.字体调整li.selected::after{背景颜色：#fff；边框：1px实心#eee；box-shadow:01px1px0#999;}article{文本-align:center;}最近在微信H5项目中需要一个字体大小调节器。刚刚看了QQ里的功能，做了一个类似的。方法不止一种，没有一种是灾难。方法一html

圣诞节结束了
再加上看完各大品牌限定的热眼狗年
我以为在接下来的几个月里，不会有什么
可以骗走我的钱
直到...我看到ysl的春季限量版...
我知道
钱包将需要再次过来。蛋。向上。style*{边距：0;填充：0；边框：无；box-sizing:border-box;}.??wrap{position:relative;填充：050px；border:1pxsolid#000;}.line{width:calc(100%-100px);高度：1px；位置：绝对；顶部：50%；变换：翻译Y(-50%)；背景颜色：#ccc；}.字体调整{显示：flex；证明内容：空格之间；对齐项目：居中；height:50px;}.font-adjustli{position:relative;列表样式：无；宽度：1px；高度：10px；背景颜色：#ccc;}.font-adjustli::after{content:'';显示：块；位置：绝对；宽度：20px；高度：20px；顶部：50%；左：50%；边界半径：50%；转换：翻译（-50%，-50%）；背景颜色：透明；}.字体调整li.selected::after{背景颜色：#fff；边框：1px实心#eee；box-shadow:01px1px0#999;}article{文本-align:center;}我们得到这样一个页面：最简单的javascript点击目标点可以设置对应的字体大小：$('.font-adjustli').on('click',function(e){$('article').attr('style',`font-size:${$(this).attr('data-size')}`);//设置字体大小$('.font-adjustli').removeClass('selected');$(this).addClass('selected');})在QQ的字体设置中，在调整区点击起点，然后在调整区左右滑动整个窗口实现调整字体的目的，我这里使用了touchmove事件，通过它返回的位置信息来判断哪个点的水平位置最接近当前，使用哪种字体大小。代码如下：varfontModel=['14px','16px','18px','20px','22px'];//替代字体序列varcurrent=0;//当前使用的字体在序列中的位置下标varfontModelsPos=$('.font-adjustli').map(function(index){//获取每个标记的位置xreturn$('.font-adjustli').eq(index)[0].offsetLeft;})$('.font-adjust').on('touchmove',function(e){e.preventDefault();varmin={i:0,dis:Math.abs(fontModelsPos[0]-e.changedTouches[0].clientX)};for(vari=1;i<5;i++){//获取最近的标记点vardis=Math.abs(fontModelsPos[i]-e.changedTouches[0].clientX);//计算触摸点和每个标记点的距离if(dis