成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS+CSS實(shí)現(xiàn)數(shù)字滾動(dòng)

Galence / 3448人閱讀

摘要：最近在實(shí)現(xiàn)一個(gè)顯示顏色數(shù)值的動(dòng)畫效果時(shí)，嘗試使用了書寫模式及來實(shí)現(xiàn)文字的豎直方向的排列，并借助的過渡來實(shí)現(xiàn)動(dòng)畫效果。書寫模式控制行內(nèi)字符的旋轉(zhuǎn)此時(shí)，效果如圖然后我們將外層容器設(shè)置為，再添加一點(diǎn)即可實(shí)現(xiàn)數(shù)字的滾動(dòng)效果。

最近在實(shí)現(xiàn)一個(gè)顯示RGB顏色數(shù)值的動(dòng)畫效果時(shí)，嘗試使用了writing-mode(書寫模式)及 text-orientation來實(shí)現(xiàn)文字的豎直方向的排列，并借助CSS的transition(過渡)來實(shí)現(xiàn)動(dòng)畫效果。關(guān)于書寫模式，參考鏈接[鏈接描述]1

各瀏覽器對(duì)writing-mode的支持情況，可在Can I use中查看，而對(duì)text-orientation的支持情況在Can I use中暫不能查到，根據(jù)筆者的測(cè)試，Chrome/FF/Opera均支持此樣式，而IE/Edge都不支持。暫未在Safari中測(cè)試，歡迎各位補(bǔ)充。

首先，創(chuàng)建數(shù)字的容器。因?yàn)镽GB顏色的范圍是0~255，因此百位數(shù)字僅需1、2兩個(gè)數(shù)字。

    

        0123456789
        0123456789
        12

接下來添加其CSS樣式，我們需要將文字的書寫方向改為從上至下，且字符方向是豎直的。使用wrting-mode樣式可以改變文字的書寫方向，使用text-orientation可以實(shí)現(xiàn)行內(nèi)字符的旋轉(zhuǎn)。

    .num_span span {
        float: right;
        /* 書寫模式 */
        writing-mode: vertical-rl;
        /* 控制行內(nèi)字符的旋轉(zhuǎn) */
        text-orientation: upright;
    }

此時(shí)，效果如圖

然后我們將外層容器設(shè)置為over-flow:hidden，再添加一點(diǎn)JS即可實(shí)現(xiàn)數(shù)字的滾動(dòng)效果。主要思路為，通過js分別得到數(shù)字個(gè)位、十位、百位上的數(shù)字，并改變對(duì)應(yīng)的margin—top即可。需要注意的是，在數(shù)字小于10時(shí)，需額外處理一下十位數(shù)字的margin-top值，使十位上的數(shù)字隱藏。完整的代碼如下。




    
    RollingNumber
    


    
    


        0123456789
        0123456789
        12

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111807.html

相關(guān)文章

  • JS+CSS實(shí)現(xiàn)數(shù)字滾動(dòng)

    摘要：最近在實(shí)現(xiàn)一個(gè)顯示顏色數(shù)值的動(dòng)畫效果時(shí)，嘗試使用了書寫模式及來實(shí)現(xiàn)文字的豎直方向的排列，并借助的過渡來實(shí)現(xiàn)動(dòng)畫效果。書寫模式控制行內(nèi)字符的旋轉(zhuǎn)此時(shí)，效果如圖然后我們將外層容器設(shè)置為，再添加一點(diǎn)即可實(shí)現(xiàn)數(shù)字的滾動(dòng)效果。 最近在實(shí)現(xiàn)一個(gè)顯示RGB顏色數(shù)值的動(dòng)畫效果時(shí)，嘗試使用了writing-mode(書寫模式)及 text-orientation來實(shí)現(xiàn)文字的豎直方向的排列，并借助CSS的...

    _DangJin 評(píng)論0 收藏0

  • 數(shù)字滾動(dòng)插件numberAnimate.js的使用及效果修改

    摘要：有個(gè)實(shí)現(xiàn)數(shù)字滾動(dòng)的需求，想著肯定有很多這種效果的插件，就不自己造輪子了，于是，找了個(gè)數(shù)字滾動(dòng)插件，還挺好用，很簡單，剛好符合需求。另外，提示一句，改變數(shù)字的字號(hào)大小，需要修改的中的字號(hào)的比例要把握好，一不小心就壞了，呵呵，親身體會(huì) 有個(gè)實(shí)現(xiàn)數(shù)字滾動(dòng)的需求，想著肯定有很多這種效果的插件，就不自己造輪子了，于是，找了個(gè)numberAnimate js數(shù)字滾動(dòng)插件，還挺好用，很簡單，剛好符合...

    fuyi501 評(píng)論0 收藏0

  • 前端實(shí)用知識(shí)

    摘要：開發(fā)中的實(shí)踐盡量使用更換實(shí)現(xiàn)樣式變化。原因事件存在毫秒延時(shí)。解決方法移動(dòng)端使用事件。文本顯示省略號(hào)顯示省略號(hào)的基本條件元素定長。單行顯示省略號(hào)多行顯示省略號(hào)目前只有內(nèi)核支持此屬性和手機(jī)端內(nèi)核以及瀏覽器默認(rèn)字體瀏覽器默認(rèn)字體是。 1、輸入U(xiǎn)RL到顯示網(wǎng)頁，中間發(fā)生了什么 DNS(完成域名到IP的映射)-->TCP傳輸(三次握手建立傳輸鏈接)-->發(fā)送請(qǐng)求(分析url，設(shè)置請(qǐng)求頭、主體)-...

    luckyw 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<