Question

我正在尝试制作滚动动画，在滚动时，svg行的x2点将是之前值的50％。

假设您从x2 = 100开始，执行onscroll功能，然后您将拥有x2 = 50, 25, 12.5...等。

滚动时，线条会缩小得越来越快。

这是我到目前为止所做的：

<body onscroll="myFunction()">
  <svg id=l ine height="50" width="100%">
    <line id = horLine x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>
</body>
<script>
  function myFunction() {
    ( ? ? ? )
  }

我不知道这是什么JavaScript。

我假设我应该创建一个变量，然后在每次函数运行时将变量值减半。

我似乎无法弄明白。

Answer 1

使用jQuery：

＆＃13;

var x2 = $('#horLine').attr('x2').slice(0, -1);
// .slice(0, -1) is used to remove the '%' from the attribute

$(document).scroll(function () {
    x2 *= 0.99;
    $('#horLine').attr('x2', x2 + '%');
});;

＆＃13;

svg { position: fixed;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="line" height="50" width="100%">
<line id="horLine" x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
<div style="height: 1000000px;">
</div>

＆＃13;

我没有做到50％，但99％，所以你可以看到效果。

您可以通过检测向上/向下滚动等来改善行为。

Answer 2

如果x2是百分比，则稍微复杂一点，但你可以通过id获取元素，然后根据x2的当前值设置它。

所以你的功能就是这样：

var x2 = document.getElementById("horLine").getAttribute("x2").match(/\d+/)[0] / 2 + "%";
document.getElementById("horLine").setAttribute("x2", x2);

您还可以使用subtring代替match来删除百分号。不确定哪个更有效率。

滚动

2 个答案: