前端學習 實現跑馬燈的三種方式

2022-04-11 05:01:52 字數 828 閱讀 9803

參考部落格:

文中提出了三種實現跑馬燈的方式,分別是1.利用js實現2.利用html標籤實現3.利用css實現 文中也給出了3種方法優劣的比較,這裡不再贅述

三玖是我老婆,春日野穹是我妹妹


#move


window.onload=function()


function moveright()


move.style.right=parseint(move.style.right)+3+'px';


settimeout(moveright,10);


}
這個就是利用js操控dom元素的屬性 利用settimeout呼叫自己 不斷改變right的大小進行移動

這個是利用marquee標籤實現
//html 	


三玖是我老婆,春日野穹是我妹妹


// css


#move


#cont


//js


window.onload=function()
利用transition實現跑馬燈效果

css實現無縫滾動

//html


1三玖是我老婆,春日野穹是我妹妹


2三玖是我老婆,春日野穹是我妹妹


//css


*	#move


#cont


#cont .text


@keyframes move


100%


}
利用animation實現無縫滾動 當然實際上是利用了2條相同的資料

跑馬燈實現的三種方式

實現跑馬燈的三種方式 分別是直接用控制項 自定義乙個horizontalscrollview和自定義乙個textview。一 直接使用控制項 優點 使用簡單 缺點 可擴充套件性差 使用 直接在xml檔案中新增如下 即可 二 自定義乙個horizontalscrollview 利用水平滑動的scrol...

TextView跑馬燈的實現

在textview屬性中有這樣的乙個屬性 android ellipsize 設定當文字過長時，該控制項該如何顯示。有如下值設定 start 省略號顯示在開頭 end 省略號顯示在結尾 middle 省略號顯示在中間 marquee 以跑馬燈的方式顯示 動畫橫向移動 好像跑馬燈這種效果已經不用咱們來...

iOS 跑馬燈的實現

介紹 我們一說起跑馬燈第乙個想到的就是 山寨機。接下來介紹的跑馬燈和那個跑馬燈是不一樣滴。在ios中，跑馬燈是指label上的字自動滾動，形成類似跑馬燈似的條幅。像這樣子 接下來就簡單看看這效果是怎麼實現的。實現1 首先我們從這個裡面能聯想到如果實現這個效果必然需要使用到動畫，或者還有有用scrol...