欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js运动

程序员文章站 2022-06-15 18:20:06
  一般的html元素的运动我们都是用css中的动画来解决,但是有时候css不能用的时候就需要js来解决了。定时器timer = setInterval(function() {div.style.left = div.offsetLeft + speed + 'px';}, 10);setTimeout(function() {clearInterval(timer);}, 600);  设置两个定时器,第一个间隔型,不断改变元素属性,第二个延迟...

  一般的html元素的运动我们都是用css中的动画来解决,但是有时候css不能用的时候就需要js来解决了。

  1. 定时器
timer = setInterval(function() {
			div.style.left = div.offsetLeft + speed + 'px';
		}, 10);
setTimeout(
			function() {
				clearInterval(timer);
			}, 600
		);

  设置两个定时器,第一个间隔型,不断改变元素属性,第二个延迟型,到时间关闭第一个定时器,就可以达到想要的目的了。
  但是间隔型定时器是可以叠加的,可能会导致你的数值不准确。

  1. 用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

相关标签: # 总结