Javascript 基本垂直线
我似乎找不到一个好的、有效的例子/教程,教我如何画一条简单的、垂直的线,使它从一无所有逐渐滚动到一整行 我有下面的代码画了一条水平线,但我似乎无法成功地将其更改为一条继续动画的垂直线 HTML: JS:Javascript 基本垂直线,javascript,jquery,html,css,svg,Javascript,Jquery,Html,Css,Svg,我似乎找不到一个好的、有效的例子/教程,教我如何画一条简单的、垂直的线,使它从一无所有逐渐滚动到一整行 我有下面的代码画了一条水平线,但我似乎无法成功地将其更改为一条继续动画的垂直线 HTML: JS: //获取元素的id和元素的长度 var三角形=document.getElementById(“三角形”); var length=triangle.getTotalLength(); //图形的起始位置 triangle.style.strokeDasharray=长度; //通过偏移虚线隐
//获取元素的id和元素的长度
var三角形=document.getElementById(“三角形”);
var length=triangle.getTotalLength();
//图形的起始位置
triangle.style.strokeDasharray=长度;
//通过偏移虚线隐藏三角形。在滚动绘制之前,删除此线以显示三角形
triangle.style.strokeDashoffset=长度;
//查找滚动上的滚动百分比(使用跨浏览器属性),并偏移与滚动百分比相同的量
addEventListener(“滚动”,myFunction);
函数myFunction(){
变量scrollpercent=(document.body.scrollTop+document.documentElement.scrollTop)/(document.documentElement.scrollHeight-document.documentElement.clientHeight);
var draw=长度*百分比;
//反转图形(向上滚动时)
triangle.style.strokeDashoffset=长度-绘制;
}
只需将线路垂直,如下所示:
<svg id="mySVG">
<path fill="none" stroke="red" stroke-width="3" id="triangle" d="M1 0 L1 75"/>
</svg>
当您这样做时会发生什么?感谢您的回复-我最终使用了CSS转换,因为这似乎效果更好。您只想使用svg吗?我想这会更容易css3@Roysh-这在动画中可能吗?在过渡中可能。是的,把这把小提琴收起来
#mySVG {
position: fixed;
top: 15%;
width: 400px;
height: 210px;
margin-left:0px;
}
<script>
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();
// The start position of the drawing
triangle.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
triangle.style.strokeDashoffset = length - draw;
}
</script>
<svg id="mySVG">
<path fill="none" stroke="red" stroke-width="3" id="triangle" d="M1 0 L1 75"/>
</svg>