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

資訊專欄INFORMATION COLUMN

單行文字垂直/水平跑馬燈效果

muzhuyu / 2580人閱讀

摘要:需求描述接到的需求是這樣的跑馬燈效果一次展示一行文字循環滾動文字滾動到視野中停留一秒后滾出。

需求描述

接到的需求是這樣的:跑馬燈效果 一次展示一行文字 循環滾動 文字滾動到視野中停留一秒后滾出。
靜態效果如下圖,文字從下往上或者從右往左滾動,滾動到此位置時停留一秒(不會傳動圖...

網絡上有比較多的多行文字循環滾動的demo,找了一下好像能滿足單行并且可停留一秒的比較少(emmm可能我沒認真找
下面貼出我的最終解決方案。

解決方案 垂直方向滾動

使用一個定時器 不斷改變最外層div的scrollTop,為了能循環滾動,增加一個與con1一樣的con2
PS:這里的time選用1000/60是因為想要模擬window.requestAnimationFrame(一般1000ms60幀,當然了,你也可以直接使用requestAnimationFrame代替setInterval,效果更好




    單行文字垂直跑馬燈效果
    


  • 測試1號
  • 測試2號
  • 測試3號
  • 測試4號
    水平方向滾動

    水平方法滾動的具體實現其實跟垂直方向類似的,不同的是要改變的是容器的scrollLeft

    
    
    
      單行文字水平跑馬燈效果
      
    
    
    
    測試1號
    測試2號
    測試3號
    測試4號
    測試5號
    測試6號

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

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

    相關文章

    • 2019,幫助你更好的開發小程序

      摘要:前言原生開發小程序有了兩個項目,在原生開發小程序經驗技巧方面有一些自己的總結,此篇文章做原創分享本文適合老手查看,新手請參閱官方文檔,同步至。 前言 原生開發小程序有了兩個項目,在原生開發小程序經驗技巧方面有一些自己的總結,此篇文章做原創分享! 本文適合老手查看,新手請參閱官方文檔,同步至github。 1.發布訂閱處理復雜邏輯 支持先訂閱后發布,以及先發布后訂閱 方法源碼 var E...

      DevTalking 評論0 收藏0
    • Android控件之TextView全解析

      摘要:設置控件中內容的位置,如上表示居中。為文本指定輸入法,需要完全限定名完整的包名。在指定的情況下,設置重復滾動的次數,當設置為時表示無限次。限制顯示的文本長度,超出部分不顯示。 前言 大家好!在前幾篇文章里,我們詳細介紹了Android中的常用布局,使大家對Android中的頁面布局有了一定認識,而對于布局中使用的一些UI控件如Button、TextView等,有的讀者可能還存在一些困惑...

      jsdt 評論0 收藏0
    • CSS實現垂直居中的4種思路

      摘要:測試文字若子元素定高,結合絕對定位的盒模型屬性,實現居中效果測試文字關于增加層級的說明在水平居中對齊中,元素外層套一層并設置,元素設置負或者的負屬性,可以實現水平居中的效果。 行高line-height實現單行文本垂直居中 以前一直認為單行文本垂直居中要將高度和行高設置成相同的值,但高度其實沒必要設置。實際上,文本本身就在一行中居中顯示。在不設置高度的情況下,行高撐開高度。 .tes...

      Pikachu 評論0 收藏0
    • css table布局大法,解決你大部分居中、多列等高、左右布局的問題

      摘要:基于這樣的布局方式,你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...

      lijinke666 評論0 收藏0

    發表評論

    0條評論

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