js實現公告欄文字從右向左勻速迴圈滾動，且公告內容可以隨時增減
阿新 • • 發佈：2019-01-08
實現思路
滾動內容的left值初始化為外部box寬度（注意：css中設定相對定位）；
每0.05s ,left值-2，直到left值=-滾動內容寬度，證明滾動到頭了（此處可根據實際體驗效果設定具體數值）；
此刻，迴歸最右側，left=box寬度。
html程式碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="all"> .d1{ margin:10px auto; width:100%; background-color:#CCCCCC; height:20px; overflow:hidden; white-space:nowrap; position: relative; } .d2{ margin:0px auto; background-color:#FF9933; } .div2{ width:auto; height:20px; font-size:12px; position: absolute; left:100%; } .notice-item-in{ margin-right: 150px; } .notice-item-in:last-child{ margin-right: 0; } </style> </head> <body ng-app="app" ng-controller="appController"> <div class="d1" id="div1"> <span class="div2" id="div2"> <span class="notice-item-in" ng-repeat="notice in noticeList">{{notice.content}}</span> </span> </div> </body> </html> <script src="jquery-1.9.1.min.js"></script> <script src="angular.js"></script> <script src="scroll.js"></script>
js程式碼如下：
var app = angular.module('app',[]); angular.module('app').controller( 'appController', ['$scope', '$rootScope','$timeout','$interval', function($scope,$rootScope,$timeout,$interval) { $scope.noticeList=[{"content":"第一個"}]; $interval(function() { $scope.noticeList=[{"content":"第一個"},{"content":"我是新建的內容我是新建的內容"},{"content":"我是新建的內容我是新建的內容"}]; }, 2000) //設定滾動內容的left值 function offset(dom, direct, size) { $(dom).css(direct, size); } function noticeScroll(){ var boxBarWidth = $(window).width()-150; var scrollBarWidth = $('#scroll-item').width(); //var maxOffsetLength; var offsetSize = boxBarWidth; offset('#scroll-item', 'left', offsetSize + 'px'); $interval(function(){ // 獲取文字節點的長度 scrollBarWidth = $('#scroll-item').width(); // 最大偏移距離 // maxOffsetLength = scrollBarWidth + boxBarWidth; // console.log('boxBarWidth', boxBarWidth); // console.log('maxOffsetLength', maxOffsetLength); // console.log('offsetSize', offsetSize); // 判斷當前是否超出最大偏移量, 如果超出重置偏移距離 // console.log(offsetSize + scrollBarWidth); if (offsetSize + scrollBarWidth <= 0) { offsetSize = boxBarWidth } // 在當前偏移量下繼續偏移一定距離 offsetSize -= 2; offset('#scroll-item', 'left', offsetSize + 'px'); },50) } }]);