移动端和网页端公告栏文字右向左轮播滑动
效果：一進入頁面，文字從右向左滑動，第一段文字滑到左端消失后，第二段才開始出現(xiàn)，就這樣飄飄飄，最后一個在左端消失后，第一段接著來。
思路：
css樣式—外面有個固定的框框，需要輪播的文字寫在ul>li里面，ul設置相對它的父級定位并且有固定寬高，li設置外邊距。
js部分—改變ul相對父級的left值，視覺上是文字在滑動，其實是ul的left值改變，定好速度值和最大left值，設置計時器，里面的num值自增，達到最大left值后，num=0，目的是讓left值從0開始重復剛才改變。
####下面是案例：
可以復制到自己的編輯器運行看效果
先寫個沒有束縛的純純的原生js:
<script type="text/javascript">window.onload = function() { //要加上這段、頁面加載自動執(zhí)行var list = document.getElementById('list');var aLi = document.getElementsByTagName('li');/*設置以下變量*/var n = list.getElementsByTagName('li').length; //獲取ul下面li的個數(shù)（用來求所有margin）var newLeft = 0; //改變ul的left的值var speed = 1; //設置的速度參數(shù)var s = 0; //讀取li的寬總和var num = 0; //計時器中的num自增變量for(var i=0;i<aLi.length;i++){s += parseInt(aLi[i].offsetWidth); //offsetWidth讀取的是內(nèi)容高度+內(nèi)邊距+邊寬（不包含外間距margin）}var total = s + n*600; //獲取到的所有l(wèi)i的寬的總和再加上他們的margin/*計時器修改left的值*/var timer = setInterval(function () {newLeft = -speed*num; num++;/*達到設置的total值之后，num=0,newLeft繼續(xù)從0開始*/if(num >= total){num = 0;}list.style.left = newLeft + 'px';}, 1) } </script>下面是用jquery：
引入jquery:<script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
變量和上面是一樣的，不用獲取li的個數(shù)n，比較起來代碼量少了一點
最近移動端用vue寫項目用到這個，于是就出現(xiàn)了一些小問題：
1.滾動的內(nèi)容是寫在li里面的，這個是要在接口獲得的data,再渲染到頁面。接口寫在created里面，js代碼寫在mounted但是讀取不到ul>li的內(nèi)容，因此寬度獲取失敗。
原因是鉤子函數(shù)的加載方式，只要改下js代碼的位置寫在updated里面就可以解決這個問題。
2.由于移動端頁面寬度是自適應的，頁面寬度是7.5rem,設置每個li的margin-left自然也是7.5rem,那么問題來了–newLeft的值是用rem還是px？
答案依然是px，一開始我多慮寫成了這樣$('#list').css({'left':newLeft+'rem'}) ,這里的newLeft是乘以0.01 的，其實這樣也有效果，就是覺得代碼怪怪的，事實上沒必要直接px就好，因為我們顯示屏分辨率以px像素為單位，即使用了rem 屏幕也會轉(zhuǎn)為px。
3.關(guān)于ul 設置的width: 20000px; 必須設置寬度，li的內(nèi)容不確定，我是設置了足夠大的寬，為了裝下滾動的內(nèi)容，這個辦法有點low，你們有更好的嘗試也可以，總之不影響效果。。 4.還有我用的是flex布局，推薦用，也可以給li設置float` ,記得清浮動就好。
總結(jié)
以上是生活随笔為你收集整理的移动端和网页端公告栏文字右向左轮播滑动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1941. Scary Martian
- 下一篇： scrapy 报错401