通过改变css top在div动画中垂直滚动
我正在尝试设置水平滑块。我有overflow: hidden div，里面有16个高度为60px的div。父div具有高度，因此您当时只能看到4个孩子。
现在我想更改孩子top: css以使其向上滑动，4个新人来自底部。
这是我到目前为止所做的事情
lastAddedService.getLastAdded()
.then(function (response) {
$scope.lastAddedElements = response.data;
var i = 0, g = 0, c = 0, p = 0;
var k = 1, b = 1, h = 1;
var slider = {
step: 1,
positionTop: 0,
init: function (step) {
var that = this;
el[0].querySelectorAll('.a').forEach(function (element) {
if(step === 1) {
if(i < 16) {
that.positionTop = i * 60;
i++;
return angular.element(element).css('top', that.positionTop);
}
}
if(step === 2) {
if(i < 4) {
that.positionTop = k * 60 * -1;
i++; k++;
return angular.element(element).css('top', that.positionTop);
}
if(i >= 4) {
k = 0;
that.positionTop = g * 60;
i++; g++;
return angular.element(element).css('top', that.positionTop);
}
}
if(step === 3) {
if(i < 8) {
that.positionTop = b * 60 * -1;
i++; b++;
return angular.element(element).css('top', that.positionTop);
}
if(i >= 8) {
that.positionTop = c * 60;
i++; c++;
return angular.element(element).css('top', that.positionTop);
}
}
if(step === 4) {
if(i < 12) {
that.positionTop = h * 60 * -1;
i++; h++;
return angular.element(element).css('top', that.positionTop);
}
if(i >= 12) {
that.positionTop = p * 60;
i++; p++;
return angular.element(element).css('top', that.positionTop);
}
}
});
},
changeSlide: function (step) {
this.step = step;
this.init(this.step);
}
};
$timeout(function () {
slider.changeSlide(1);
});
setTimeout(function () {
setInterval(function () {
var q = 1;
q++;
slider.changeSlide(q);
if(q === 4) {
q = 1;
}
}, 5000);
}, 5000);
}, function (err) {
console.log('error getting last added');
});
}
所以我从后端收集记录，然后有一个滑块对象，它具有我在上面解释过的逻辑。
后端调用工作正常，我做了控制台响应，它是16条记录，我稍后在布局层中显示。问题主要是关于这个滑动对象的逻辑。
我正在使用$timeout来启动代码工作，因为这段代码确实在angularJS指令中，而querySelectorAll得到的NodeList将为空，否则因为它是在async后端调用完成后再进行评估然后是DOM满载。但它与这个脚本的真实逻辑并不真正相关，它只是附加信息。
- 这段代码对我来说非常糟糕。我怎么能改进它？
- 大约20秒后开始更新顶部，1 div有960px我不知道为什么。
- 它不会重置此变量值，因此它不会循环，但会进一步增加
top。
如果有人想重现问题，我会从我的指令中添加HTML
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row u-no-margin">
<div class="col-lg-11 col-xs-11">
<h2 class="main__heading">
Ostatnio dodane
</h2>
<div class="main__last-added-field">
<div class="main__last-added a" data-ng-repeat="n in lastAddedElements">
<div class="row u-no-margin main__last-added-container">
<div class="col-lg-3 col-md-2 col-sm-2 col-xs-2">
<h4 class="main__last-added-heading">
{{ n.data.attributes.price }}
</h4>
</div>
<div class="col-lg-7 col-xs-8 u-no-padding">
<h4 class="main__last-added-heading u-no-padding">
{{ n.data.attributes.name }}
</h4>
</div>
<div class="col-lg-2 col-xs-2">
<button type="button" class="btn btn__primary">
Zobacz
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-1 col-xs-1">
<div class="main__last-added-dot-container">
<span class="main__last-added-dot main__last-added-dot--active"></span>
<span class="main__last-added-dot"></span>
<span class="main__last-added-dot"></span>
<span class="main__last-added-dot"></span>
</div>
</div>
</div>
</div>
JS代码在指令link: function内，而templateUrl在HTML代码之上。
<小时/> <小时/> <小时/> **编辑** <小时/> <小时/>
我更新问题我添加了plunker显示问题，并且我逐步解释了我想要完成的事情。
- Step1：所有元素都有
top: xcss，因此它们垂直对齐。我在父母身上使用overflow: hidden，所以你看到只有4和12隐藏在这样的 之下
-
Step2我将前4个元素移动到
top: -x，这样你就不会看到前4个元素和元素5,6,7,8取代它们所以元素5,6,7,8现在滑到了顶部和前4个都是隐藏的。 -
步骤3与Step2相同：元素5,6,7,8移动到负顶部，您现在看到元素9,10,11,12
-
步骤4与Step3相同：元素9,10,11,12移动到负顶部，您现在看到元素13,14,15,16
我不知道为什么但是在plunker中它根本没有udpate css top of elements。
2 个答案:
答案 0 :(得分：0)
首先，我建议您为html / css视图使用仅限引导程序的解决方案，因为它具有响应性，经过测试，您将拥有更清晰的代码。
我对滑块逻辑进行了一些修改，逻辑就像滑块是分页指令一样。
基本上，您将数据划分为页面，然后跟踪要在视图上显示的当前页面。
在您的elements指令中，您对数据使用两个过滤器（startFrom，limitTo）。 'limitTo'是Angular中的内置过滤器，'startFrom'是您必须创建的自定义过滤器。
<div class="" data-ng-repeat="n in elements | startFrom:currentPage*pageSize | limitTo:pageSize">
这只是一个可以帮助您重构代码的ideia，这样您就不需要css定位来确定将显示哪些项目。这是我的演示：
https://plnkr.co/edit/IROsQWr5z4oYgZzmR2GF?p=preview
我希望这有帮助！
答案 1 :(得分：0)
我已经用这段代码完成了它：
<div class="main__last-added a"
data-ng-repeat="n in lastAddedElements"
data-order="{{ $index+1 }}">
(function () {
'use strict';
angular
.module('igt')
.directive('lastAdded', Directive);
Directive.$inject = ['$timeout', 'lastAddedService'];
function Directive($timeout, lastAddedService) {
return {
restrict: 'E',
scope: {
destiny: '='
},
templateUrl: 'html/directives/lastAdded.html',
link: function ($scope, el) {
lastAddedService.getLastAdded()
.then(function (response) {
$scope.lastAddedElements = response.data;
$scope.slider = {
increment: 0,
step: 1,
positionTop: 0,
init: function (step) {
var that = this;
var elements = el[0].querySelectorAll('.a');
if(step === 1) {
console.log('run step 1 ..............');
this.step = 1;
elements.forEach(function (e) {
var order = angular.element(e).attr('data-order');
if(order <= 16) {
that.positionTop = order * 60 - 60;
return angular.element(e).css('top', that.positionTop);
}
});
}
if(step === 2) {
console.log('run step 2 ..............');
this.step = 2;
elements.forEach(function (e) {
var order = angular.element(e).attr('data-order');
if (order <= 4) {
that.positionTop = order * 60 * -1;
return angular.element(e).css('top', that.positionTop);
}
if (order > 4) {
that.positionTop = that.increment * 60;
that.increment++;
console.log(that.increment);
if (that.increment === 12) {
that.increment = 0;
console.log('reset inc in step 2');
}
return angular.element(e).css('top', that.positionTop);
}
});
}
if(step === 3) {
console.log('run step 3 ..............');
this.step = 3;
elements.forEach(function (e) {
var order = angular.element(e).attr('data-order');
if (order <= 8) {
that.positionTop = order * 60 * -1;
return angular.element(e).css('top', that.positionTop);
}
if (order > 8) {
that.positionTop = that.increment * 60;
that.increment++;
console.log(that.increment);
if (that.increment === 8) {
that.increment = 0;
console.log('reset inc in step 3');
}
return angular.element(e).css('top', that.positionTop);
}
});
}
if(step === 4) {
console.log('run step 4 ..............');
this.step = 4;
elements.forEach(function (e) {
var order = angular.element(e).attr('data-order');
if (order <= 12) {
that.positionTop = order * 60 * -1;
return angular.element(e).css('top', that.positionTop);
}
if (order > 12) {
that.positionTop = that.increment * 60;
that.increment++;
console.log(that.increment);
if (that.increment === 4) {
that.increment = 0;
console.log('reset inc in step 4');
}
return angular.element(e).css('top', that.positionTop);
}
});
}
},
changeSlide: function (step) {
this.step = step;
this.init(this.step);
}
};
$timeout(function () {
var i = 1;
$scope.slider.changeSlide(i);
setInterval(function () {
i++; if(i === 5) i = 1;
$scope.slider.changeSlide(i);
}, 5000);
});
}, function (err) {
console.log('error getting last added: ' + err);
});
}
}
}
})();
但是这个代码看起来仍然非常蹩脚，尽管它比第一个版本好一点。我觉得它可以用更简单的方式完成。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？