香蕉大综综综合,内射一区二区精品视频在线观看,亚洲国产精品热久久,欧美日韩国产一区二区三区地区

服務(wù)熱線 400-660-8066

網(wǎng)站建設(shè)

網(wǎng)站建設(shè)

站內(nèi)資訊
網(wǎng)站建設(shè) / 站內(nèi)資訊 / 產(chǎn)品資訊 / 正文

網(wǎng)站前端制作之文字滾動效果

來源: All文章
發(fā)布時間:2023-05-17 14:00:34

  最近工作中需要做在特定的li里實現(xiàn)標題文字滾動播放展示的效果,這樣就能實現(xiàn)單行顯示,文字超出也無需顯示省略,標題文字滾動播放就能把標題顯示完全。實現(xiàn)這種效果可以用marquee/marquee、基于CSS3animation做出marquee滾動效果等。這幾種方式均可以實現(xiàn)這種文字滾動播放的效果,不過都是各有優(yōu)缺點。

  需要實現(xiàn)的文字滾動效果如下圖所示:

  方式一:用marquee/marquee就可以實現(xiàn)文字滾動播放的動態(tài)效果,下面是關(guān)于marquee標簽屬性的部分描述:

  Direction可以設(shè)置標題文字的滾動方向,direction=down是向下的,direction=left是向左的,direction=right是向右的,direction=up是向上的。

  Width和height是設(shè)置文字滾動的區(qū)域大小。

  hspace和Vspace是設(shè)置標題文字的位置距離父級p的水平距離和垂直距離,距離值為正整數(shù),單位是像素。

  Behavior是設(shè)置滾動的方式,behavior=scroll是重復(fù)從一端滾動到另外一端。behavior=alternate是在兩端之間來回滾動,behavior=slide是不重復(fù)從一端滾動到另外一端。

oop是設(shè)置標題文字滾動的次數(shù),設(shè)置loop=-1是不斷循環(huán)滾動,設(shè)置loop=2是循環(huán)滾動兩次。

  Scrollamount是設(shè)置標題文字的滾動速度,滾動速度值為正整數(shù),默認是6。

  Scrolldelay是設(shè)置標題文字滾動的延遲時間。

  onMouseout=this.start()和onMouseover=this.stop()分別是設(shè)置鼠標移出這個區(qū)域繼續(xù)滾動和鼠標移入這個區(qū)域停止?jié)L動。

  注意:雖然marquee已經(jīng)過時了,不建議使用,W3C官方文檔里已查不到這個標簽,但是這個標簽對各大瀏覽器的兼容挺好的。

  方式二:基于CSS3animation做出Marquee的效果。

  Html:

  

  ul

iclass=rollbox

  pclass=t1NLS-FR27-Datasheet/

  pclass=rollwra

  pclass=rolltxt

  pclass=rollwordNLS-FR27-DatasheetNLS-FR27-DatasheetNLS-FR27-DatasheetNLS-FR27-Datasheet/

  /

  /

  pclass=t2pLanguage:English/ppUpdateDate:2023-06-26/p/

  pclass=t3

  ahref=Downloads/a

  /

  /li

  /ul

  /

  Css:

  style

  .rollwrap{

  margin:0auto;

  white-space:nowrap;

  overflow:hidden;

  box-sizing:border-box;

  }

  .rollwrap.rolltxt{

  display:inline-block;

  padding-left:100%;/*從右至左開始輪播*/

  animation:roll15slinearinfinite;/*設(shè)置15s內(nèi)完成播放動畫,無限次勻速重復(fù)播放*/

  }

  .rollwrap.rolltxt:hover{

  -webkit-animation-play-state:paused;/*鼠標移入時暫停輪播,IE9以及更早的版本不支持這個屬性*/

  animation-play-state:paused;

  }

  .rollword{

  font-family:Poppins-Medium;

  color:#1b2077;

  font-size:18px;

  }

  @-webkit-keyframesroll{

  0%{-webkit-transform:translate(0,0);}

  100%{-webkit-transform:translate(-100%,0);}

  }

  @keyframesroll{

  0%{transform:translate(0,0);}

  100%{transform:translate(-100%,0);}

  }

  /style

  注意:當(dāng)標題文字內(nèi)容長度一致,動畫勻速播放,效果一致,但是當(dāng)標題文字內(nèi)容長度不一致的時候,動畫的速度也會有所不同,就會導(dǎo)致頁面出現(xiàn)滾動動畫播放速度不一致的效果。

* 文章來源于網(wǎng)絡(luò),如有侵權(quán),請聯(lián)系客服刪除處理。
在線 咨詢

添加動力小姐姐微信

微信 咨詢

電話咨詢

400-660-8066

我們聯(lián)系您

電話 咨詢
微信掃碼關(guān)注動力小姐姐 X
qr