国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

<del id="6aoew"></del>

<strike id="6aoew"></strike>

<ul id="6aoew"></ul>

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

首頁/文章專欄/移動(dòng)端字體大小調(diào)節(jié)器實(shí)現(xiàn)

移動(dòng)端字體大小調(diào)節(jié)器實(shí)現(xiàn)

cpupro 發(fā)布于2019-08-02 10:03 / 1931人閱讀

摘要：最近在一個(gè)微信項(xiàng)目中需要用到字體大小調(diào)節(jié)器，就看了一下中的功能，就做了一個(gè)相似的，方法也不止一種，而且都不難。第三點(diǎn)在我目前的項(xiàng)目中，在微信瀏覽器是不需要考慮的。

最近在一個(gè)微信H5項(xiàng)目中需要用到字體大小調(diào)節(jié)器，就看了一下QQ中的功能，就做了一個(gè)相似的，方法也不止一種，而且都不難。

方法1 html


    
    
        
        
        
        
        
    


    圣誕已過
再加上看過各個(gè)大牌出的辣眼睛狗年限定以后
我以為未來的幾個(gè)月應(yīng)該是沒有什么東西
能騙到我的錢了
直到...看到了ysl的春季限定...
我知道
錢包又要完。蛋 。了。

style

我們得到這樣的頁面：

javascript

最簡單的單擊目標(biāo)點(diǎn)可以設(shè)置對應(yīng)字體大小：

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

在QQ的字體設(shè)置中，只要點(diǎn)擊起始點(diǎn)在調(diào)節(jié)區(qū)域，之后在整個(gè)窗口左右滑動(dòng)也可以達(dá)到調(diào)節(jié)字體的目的，我這里用的是 touchmove 事件，利用它返回的位置信息，判斷當(dāng)前距離哪個(gè)點(diǎn)的水平位置最近，就使用哪個(gè)字體大小，代碼如下：

var fontModel = ["14px", "16px", "18px", "20px", "22px"]; // 可供選擇的字體序列
var current = 0; // 當(dāng)前使用的字體在序列中的位置下標(biāo)
var fontModelsPos = $(".font-adjust li").map(function (index) { // 獲得每個(gè)標(biāo)記點(diǎn)的位置 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++){ // 獲得最近標(biāo)記點(diǎn)
        var dis = Math.abs(fontModelsPos[i] - e.changedTouches[0].clientX); // 計(jì)算觸控點(diǎn)和各標(biāo)記點(diǎn)的距離
        if (dis < min.dis) { // 找出最近的那個(gè)
            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，后來隱約記得有個(gè)元素可以充當(dāng)這個(gè)來調(diào)節(jié)器來用，是它，是它，就是它：input 。input 中有一個(gè)屬性 type="range" ，使用它可以更方便的完成上述功能。

html

這里還是保留了上面的部分代碼（5個(gè)定位點(diǎn)和1條橫線），因?yàn)?input 是沒有這些點(diǎn)的，橫線可以通過更改默認(rèn)滑軌的樣式成為一條細(xì)線，但是當(dāng)滑塊在兩端時(shí)，橫線的頂點(diǎn)并不在滑塊中央，不介意的話問題也不大。

如下的透視圖展示的就是頂點(diǎn)在滑塊正中央：

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);

總結(jié)

兩種方法實(shí)現(xiàn)起來看起來都挺簡單，但是綜合考慮還是第二種方法優(yōu)先，我考慮的方面主要有三點(diǎn)：

當(dāng)各字體的5個(gè)標(biāo)記點(diǎn)不是一條豎線，而是一個(gè)圓或者其他形狀的時(shí)候，我們需要計(jì)算圓的中心點(diǎn)，而眾所周知移動(dòng)端我們可能會(huì)用 rem 或者其他單位，這時(shí)候計(jì)算起來比較棘手了；

在 touchmove 事件中處理了很多計(jì)算問題，比較消耗資源，有可能會(huì)造成用戶體驗(yàn)不佳；

touchmove 事件的兼容性，Safari 暫不支持，有可能會(huì)造成困擾。

第三點(diǎn)在我目前的項(xiàng)目中，在微信瀏覽器是不需要考慮的。

該文章首發(fā)于https://blog.bingqichen.me/。