js运动
程序员文章站
2022-03-13 20:20:42
一般的html元素的运动我们都是用css中的动画来解决，但是有时候css不能用的时候就需要js来解决了。定时器timer = setInterval(function() {div.style.left = div.offsetLeft + speed + 'px';}, 10);setTimeout(function() {clearInterval(timer);}, 600); 设置两个定时器，第一个间隔型，不断改变元素属性，第二个延迟...
一般的html元素的运动我们都是用css中的动画来解决，但是有时候css不能用的时候就需要js来解决了。
- 定时器
timer = setInterval(function() {
div.style.left = div.offsetLeft + speed + 'px';
}, 10);
setTimeout(
function() {
clearInterval(timer);
}, 600
);
设置两个定时器，第一个间隔型，不断改变元素属性，第二个延迟型，到时间关闭第一个定时器，就可以达到想要的目的了。
但是间隔型定时器是可以叠加的，可能会导致你的数值不准确。
- 用css的时间
css中的transition属性js也是可以使用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#a{
width: 80px;
height: 50px;
background-color: #90FF8E;
transition: 1s;
}
</style>
</head>
<body>
<div id="a"></div>
<script>
document.getElementById('a').onclick = function() {
var width = parseInt(a.style.width || a.clientWidth || a.offsetWidth || a.scrollWidth);
if(width < 100) {
a.style.width = '200px';
} else {
a.style.width = '80px';
}
};
</script>
</body>
</html>
欢迎补充
本文地址：https://blog.csdn.net/small_shadow/article/details/107384461