首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在一个函数中添加多个in

在一个函数中添加多个in
EN

Stack Overflow用户
提问于 2016-07-14 07:00:05
回答 1查看 174关注 0票数 0

我试图让这段代码与多个id一起工作,但我不能让它工作。我尝试过使用querySelectorAll,但并不成功。我也读了this article,但没有一个选项对我有效,有人能帮我吗?

代码如下:

代码语言:javascript
运行
复制
<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>
EN

Stack Overflow用户

发布于 2016-07-14 07:19:48

循环遍历与选择器匹配的所有元素。

代码语言:javascript
运行
复制
var lines = document.querySelectorAll("#line, #line1, #line2");
for (var i = 0; i < lines.length; i++) {
    new Scroller({
        el: lines[i],
        startPoint: .8,
        endPoint: .5
    });
}
票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38363071

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档