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

資訊專欄INFORMATION COLUMN

移動端字體大小調節器實現

lastSeries / 1612人閱讀

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

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

方法1 html 

    

    
    
        
  • 
        
  • 
        
  • 
        
  • 
        
  • 
    





    圣誕已過
再加上看過各個大牌出的辣眼睛狗年限定以后
我以為未來的幾個月應該是沒有什么東西
能騙到我的錢了
直到...看到了ysl的春季限定...
我知道
錢包又要完。蛋 。了。
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 

    
    
    

    
    
        
  • 
        
  • 
        
  • 
        
  • 
        
  •

這里還是保留了上面的部分代碼（5個定位點和1條橫線），因為 input 是沒有這些點的，橫線可以通過更改默認滑軌的樣式成為一條細線，但是當滑塊在兩端時，橫線的頂點并不在滑塊中央，不介意的話問題也不大。

如下的透視圖展示的就是頂點在滑塊正中央：

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/。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93841.html

相關文章

  • 移動端字體大小調節器實現

    摘要：最近在一個微信項目中需要用到字體大小調節器，就看了一下中的功能，就做了一個相似的，方法也不止一種，而且都不難。第三點在我目前的項目中，在微信瀏覽器是不需要考慮的。 最近在一個微信H5項目中需要用到字體大小調節器，就看了一下QQ中的功能，就做了一個相似的，方法也不止一種，而且都不難。 showImg(https://segmentfault.com/img/bV7g5Y?w=750&h=...

    cpupro 評論0 收藏0

  • 簡單粗暴的移動端頁面開發技能

    摘要：移動端響應式頁面開發說簡單也簡單，根據屏幕尺寸調節根字體大小。大寬度用，高度和小寬度全部使用，簡單粗暴。之前閱讀過大漠老師的使用實現手淘頁面的終端適配介紹了手淘項目的制作規范。 移動端響應式頁面開發說簡單也簡單，根據屏幕尺寸調節根字體大小。 大寬度用%，高度和小寬度全部使用rem，簡單粗暴。 之前閱讀過大漠老師的使用Flexible實現手淘H5頁面的終端適配,介紹了手淘項目的H5制作規...

    jeffrey_up 評論0 收藏0

  • 簡單粗暴的移動端頁面開發技能

    摘要：移動端響應式頁面開發說簡單也簡單，根據屏幕尺寸調節根字體大小。大寬度用，高度和小寬度全部使用，簡單粗暴。之前閱讀過大漠老師的使用實現手淘頁面的終端適配介紹了手淘項目的制作規范。 移動端響應式頁面開發說簡單也簡單，根據屏幕尺寸調節根字體大小。 大寬度用%，高度和小寬度全部使用rem，簡單粗暴。 之前閱讀過大漠老師的使用Flexible實現手淘H5頁面的終端適配,介紹了手淘項目的H5制作規...

    Gilbertat 評論0 收藏0

  • Web網頁布局的主要方式

    摘要：改變屏幕分辨率可以切換不同的靜態局部頁面元素位置發生改變，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。即創建多個流體式布局，分別對應一個屏幕分辨率范圍。 一、靜態布局（static layout） 　　即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 　　不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態...

    blastz 評論0 收藏0

  • Web網頁布局的主要方式

    摘要：改變屏幕分辨率可以切換不同的靜態局部頁面元素位置發生改變，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。即創建多個流體式布局，分別對應一個屏幕分辨率范圍。 一、靜態布局（static layout） 　　即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 　　不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態...

    shiina 評論0 收藏0

發表評論

0條評論

lastSeries

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<