<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿淘宝首页-淘汰头条滚动效果</title> <script src="https://cdn.bootcss.com/angular.js/1.6.7/angular.min.js"></script> <style type="text/css"> .box{ margin:100px auto; border:1px solid #ccc; width:170px; height:42px; line-height:20px; overflow:hidden; } .box .content{ list-style-type:none; margin:0;padding:0; margin-left:6px; } /*系统支持ie8就选line-height:16px;，但不支持opera 否则选line-height:20px;*/ .box .content a{ font-size:12px; line-height:16px; } </style> </head> <body ng-app="myApp"> <div class="box" ng-controller="ezCtrl"> <div id="transverseRoll"> <div class="content" ng-repeat="item in msgArr track by $index"> <span ng-bind="item"></span> </div> </div> <script language="javascript"> var app = angular.module("myApp", []); app.controller("ezCtrl", function ($scope, $http,$timeout,$interval) { $scope.items = [ { con:[ '身高多少', '体重多少', ] }, { con: [ '身高多少1', '体重多少1', ] }, { con: [ '身高多少2', '体重多少2', ] } ] /** * des 仿淘宝首页-淘汰头条滚动效果 * @param {[type]} timer [定时器] * @param {[type]} _timer [定时器] * @param {[type]} temp [临时变量用来存储当前显示的内容] * @param {[type]} max [] * @param {[type]} index [当前显示内容的索引] * @param {[type]} obj [获取滚动元素] * @param {[type]} $scope.msgArr [当前显示内容] * @param {[type]} lh [高度] * @param {[type]} speed [时间] */ var startmarquee = function(lh, speed, delay) { var timer = null,_timer = null,temp = []; var max = $scope.items.length-1,index = 0; var obj = document.getElementById("transverseRoll"); obj.style.marginTop = 0; temp = $scope.items[index].con; $scope.msgArr = temp.concat(temp); var start = function() { $scope.msgArr = [];//初始化 index++;//0,1,2 if (index > max) { index = 0; } //更新显示内容 temp = $scope.items[index].con; setTimeout(() => { $scope.$apply(function(){ $scope.msgArr = temp.concat(temp); }); }, 100); clearInterval(timer); timer = setInterval(scrolling, speed); obj.style.marginTop = parseInt(obj.style.marginTop) - 4 + "px"; } var scrolling = function() { if (parseInt(obj.style.marginTop) % lh != 0) { obj.style.marginTop = parseInt(obj.style.marginTop) - 4 + "px"; if (Math.abs(parseInt(obj.style.marginTop)) >= obj.scrollHeight / 2) obj.style.marginTop = 0; } else { clearInterval(timer); clearTimeout(_timer); setTimeout(start, delay); } } clearTimeout(_timer); setTimeout(start, delay); } startmarquee(2000, 20, 1500); }) </script> </body> </html>
作者：smile.轉角
QQ：493177502