快捷導(dǎo)航

原生js實(shí)現(xiàn)公告滾動(dòng)效果

更新時(shí)間：2021年01月10日 09:52:02 作者：DreamFJ

這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)公告滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)公告滾動(dòng)展示的具體代碼，供大家參考，具體內(nèi)容如下

1.html結(jié)構(gòu)

<body>
 <div id="notice" class="notice">
 <ul id="noticeList">
  <li>我是公告1</li>
  <li>我是公告2</li>
  <li>我是公告3</li>
  <li>我是公告4</li>
 </ul>
 </div>
</body>

2.css樣式

<style type="text/css">
 body,
 div,
 ul,
 li {
  margin: 0;
  padding: 0;
 }
 
 ul,
 li {
  list-style: none;
 }
 
 .notice {
  width: 300px;
  height: 30px;
  border: 1px solid black;
  text-align: center;
  overflow: hidden;
 }
 
 li {
  padding: 3px;
 }
 </style>

3.js行為

<script type="text/javascript">
 window.onload = function() {
  var notice = document.getElementById("notice");
  var noticeList = document.getElementById("noticeList");
 
  // 獲取ul下第一個(gè)li元素，好計(jì)算li的高度，因?yàn)楹竺鏉L動(dòng)的時(shí)候每次要滾動(dòng)一個(gè)高度，這里li都是一樣高的，
  // 所以獲取第一個(gè)的高度就行了，不然要遍歷獲取每一個(gè)li的高度。
  var noticeFirstItem = noticeList.querySelector("li");
 
  // 獲取li的高度，這里獲取的是offsetHeight，關(guān)于js各種高度的定義可以注意以下
  var scrollHeight = noticeFirstItem.offsetHeight;
  // 是否可以進(jìn)行動(dòng)畫(huà)
  var opt = {
  animated: true,
  interval: 1000
  };
 
  notice.onclick = function() {
  // 動(dòng)畫(huà)之前首先重置
  // noticeFirstItem.style.transition = "";
  noticeFirstItem.style.marginTop = 0;
  if (opt.animated) {
   opt.animated = false;
   animate(noticeList, scrollHeight, opt);
  }
  };
 };
 
 // 動(dòng)畫(huà)函數(shù)，obj——要產(chǎn)生動(dòng)畫(huà)的對(duì)象，sHeight——每次要滾動(dòng)的距離，interval——多久滾動(dòng)一次
 function animate(obj, sHeight, option) {
  // 當(dāng)滾到最后一條公告的時(shí)候就不用動(dòng)畫(huà)了。
  var stopHeight = sHeight - obj.scrollHeight;
  var marginTopNum = 0;
  var timer = setInterval(function() {
  marginTopNum -= sHeight;
  obj.style.marginTop = marginTopNum + "px";
  obj.style.transition = "margin-top 1.5s ease";
  // 注意這里的比較符號(hào)，前面得到的高度都進(jìn)行四舍五入了
  if (marginTopNum <= stopHeight) {
   clearInterval(timer);
   // option.animated = true;
  }
  }, option.interval);
 }
 </script>

4.運(yùn)行結(jié)果

動(dòng)畫(huà)在進(jìn)行中時(shí)注意控制不能進(jìn)行其他動(dòng)畫(huà)！

結(jié)束語(yǔ)：不要把動(dòng)畫(huà)想得很難，當(dāng)你想實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)時(shí)，比如jquery的animate方法，你可以先實(shí)現(xiàn)針對(duì)一個(gè)屬性的動(dòng)畫(huà)，然后再想辦法擴(kuò)展到多個(gè)屬性（即以對(duì)象方式去傳參，然后遍歷對(duì)象中的每個(gè)樣式屬性，然后給每個(gè)樣式屬性添加動(dòng)畫(huà)）。以前都是用js去實(shí)現(xiàn)每一幀每一幀的移動(dòng)，即在肉眼無(wú)法反應(yīng)過(guò)來(lái)的時(shí)間里產(chǎn)生移動(dòng)，這樣就能產(chǎn)生連續(xù)移動(dòng)的效果，現(xiàn)在css3出來(lái)了，可以方便的利用css3來(lái)實(shí)現(xiàn)過(guò)渡效果了，而不用復(fù)雜的js來(lái)實(shí)現(xiàn)了。這個(gè)真的太棒了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: