<!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