gpt4 book ai didi

javascript - 在滚动条上连续减少 SVG 长度

转载 作者:行者123 更新时间:2023-11-30 21:08:31 24 4
gpt4 key购买 nike

我正在尝试制作一个滚动动画,当您滚动时,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 是什么。

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

我似乎无法弄清楚。

最佳答案

使用 jQuery:

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 + '%');
});;
svg { position: fixed;}
<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>

我没有做50%,是99%,大家可以看到效果。

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

关于javascript - 在滚动条上连续减少 SVG 长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46372789/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com