在函数中添加多个 ID
Add multiple ids in a function
我正在尝试使此代码适用于多个id,但我无法使其工作。我已经尝试过querySelectorAll,但没有成功。我也读过这篇文章,但没有一个选项对我有用谁能帮我?
这是代码:
<script>
function Scroller(options) {
this.svg = options.el;
//Animation will end when the end is at which point of othe page. .9 is at about 90% down the page/
// .1 is 10% from the top of the page. Default is middle of the page.
this.animationBounds = {};
this.animationBounds.top = options.startPoint || .5;
this.animationBounds.bottom = options.endPoint || .5;
this.animationBounds.containerBounds = this.svg.getBoundingClientRect();
this.start = this.getPagePosition('top');
this.end = this.getPagePosition('bottom');
this.svgLength = this.svg.getTotalLength();
this.svg.style.strokeDasharray = this.svgLength;
this.animateLine();
window.addEventListener('scroll', this.animateLine.bind(this));
}
Scroller.prototype.getPagePosition = function (position) {
//These positions are all relative to the current window. So they top of the page will be negative and thus need to be
//subtracted to get a positive number
var distanceFromPageTop = document.body.getBoundingClientRect().top;
var divPosition = this.animationBounds.containerBounds[position];
var startPointInCurrentWindow = window.innerHeight * this.animationBounds[position];
return divPosition - distanceFromPageTop - startPointInCurrentWindow;
};
Scroller.prototype.animateLine = function () {
this.currentVisiblePosition = window.pageYOffset;
if (this.currentVisiblePosition < this.start) {
this.svg.style.strokeDashoffset = this.svgLength;
}
if (this.currentVisiblePosition > this.end) {
this.svg.style.strokeDashoffset = '0px';
}
if (this.currentVisiblePosition > this.start && this.currentVisiblePosition < this.end) {
this.svg.style.strokeDashoffset = this.distanceRemaining() * this.pixelsPerVerticalScroll() + 'px';
}
};
Scroller.prototype.distanceRemaining = function () {
return this.end - this.currentVisiblePosition;
};
Scroller.prototype.pixelsPerVerticalScroll = function () {
this.verticalDistance = this.end - this.start;
return this.svgLength / this.verticalDistance;
};
new Scroller({
'el': **document.getElementById('line')**,
'startPoint': .8,
'endPoint': .5
});
</script>
遍历与选择器匹配的所有元素。
var lines = document.querySelectorAll("#line, #line1, #line2");
for (var i = 0; i < lines.length; i++) {
new Scroller({
el: lines[i],
startPoint: .8,
endPoint: .5
});
}
相关文章:
- 可以't将带有变量的id添加到类中
- 使用 jQuery 将自定义 ID 添加到克隆的 HTML 节点
- 将ID添加到地图框标记
- 单击按钮时,我如何将li的id添加为1
- Ember.js为特定的模型id添加css类
- jQuery UI:如何将ID添加到组合框中
- 通过向动态id添加字符串,使用JavaScript控制文本框
- 使用 javascript 在运行时将 id 添加到
- 标签
- 将关联的 ID 添加到 for 循环中的复选框
- 将 ID 添加到画布绘图以供以后检索
- 如何将唯一 ID 添加到 Javascript 中动态创建的输入字段
- 将行 ID 添加到 jquery 弹出窗口
- 在 jQuery 中向未知元素 ID 添加值
- 将 Div ID 添加到 YouTube iFrame
- Javascript - 将唯一的元素 id 添加到具有相同类名的多个元素
- 如何阻止单个模型将其 id 添加到 Backbone 中的 url
- 在滚动页面时将页面部分 ID 添加到地址栏
- Stylus:为在 JavaScript 中生成的 ID 添加样式
- 如何在谷歌地图API中将类或ID添加到叠加层
- 将唯一 ID 添加到在单击函数上生成的动态 html