原生JS实现元素的多值运动

最新推荐文章于 2022-09-18 16:54:38 发布
最新推荐文章于 2022-09-18 16:54:38 发布
阅读量166 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fandyvon/article/details/88718916
版权

原生JS实现元素的多值运动

原生JS实现元素的多值运动。

在介绍JS运动内容时，我们陆续介绍了简单的运动，图片透明度运动，摩擦运动和缓冲运动。这些运动基本上都是一个元素的单一运动。如果在一个元素身上同时发生两种运动形式呢？应该比如当鼠标点击元素时，元素的宽和高同时发生改变，或者先改变元素的宽，再改变元素的高，发生在一个元素上的这种运动形式就叫多值运动，应该如何操作？

1、当改变的宽高距离一样

在同一时间内，元素的宽高改变是一样值的时候，这个时候可以一起运动。但是同时改变宽和高，按理来说我们要用到数组，但数组不好调用。如果将两个宽高运动拆开来运动，下面的定时器会清除掉上面的定时器。我们考虑用JSON来操作。直接调用函数的形式来操作。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');

	//用JSON方式调用函数
	oDiv1.onclick = function() {
		
		startMove(this, {
			width : 200,
			height: 200
		}, 10);
	}
	
	function startMove(obj, json, iSpeed) {
		clearInterval(obj.iTimer);//开始清除定时器
		var iCur = 0;
			
		obj.iTimer = setInterval(function() {
			
			for ( var attr in json ) {
				
				var iTarget = json[attr];
				
				if (attr == 'opacity') {
					iCur = Math.round(css( obj, 'opacity' ) * 100);
				} else {
					iCur = parseInt(css(obj, attr));
				}
				
				if (iCur == iTarget) {
					clearInterval(obj.iTimer);
				} else {
					if (attr == 'opacity') {
						obj.style.opacity = (iCur + iSpeed) / 100;
						obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
					} else {
						obj.style[attr] = iCur + iSpeed + 'px';
					}
				}
			}
			
		}, 30);
	}
	
	function css(obj, attr) {
		if (obj.currentStyle) {
			return obj.currentStyle[attr];
		} else {
			return getComputedStyle(obj, false)[attr];
		}
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
</body>
</html>

在线操作

如果改变的宽高是不一样的值会发生什么呢？在同一时间内，如果宽高改变的值不一样，那么改变的最长的那边将不会达到目标，运动就会停止。

2、当改变的宽高不一致时

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	
	oDiv1.onclick = function() {
		
		startMove(this, {
			width : 200,
			height: 300
		}, 10);
	}
	
	function startMove(obj, json, iSpeed) {
		clearInterval(obj.iTimer);
		var iCur = 0;
			
		obj.iTimer = setInterval(function() {
			
			var iBtn = true;
						
			for ( var attr in json ) {
				
				//什么时候停止定时器？所有属性都运动到了目标点的时候
				
				var iTarget = json[attr];
				
				if (attr == 'opacity') {
					iCur = Math.round(css( obj, 'opacity' ) * 100);
				} else {
					iCur = parseInt(css(obj, attr));
				}
				
				if (iCur != iTarget) {
					iBtn = false;
					if (attr == 'opacity') {
						obj.style.opacity = (iCur + iSpeed) / 100;
						obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
					} else {
						obj.style[attr] = iCur + iSpeed + 'px';
					}
				}
				
			}
			
			//在这里来看下，所有属性是不是都到了目标点
			if (iBtn) {
				clearInterval(obj.iTimer);
			}
			
		}, 30);
	}
	
	function css(obj, attr) {
		if (obj.currentStyle) {
			return obj.currentStyle[attr];
		} else {
			return getComputedStyle(obj, false)[attr];
		}
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
</body>
</html>

在线操作

上面两个例子都是宽高一起运动，如果宽高改变值不一致的情况下，先一起运动，高再继续运动。如果我们想要先改变宽度，当宽度到达目标点后，再改变高度值，如何操作呢？

3、先改变宽度值，再改变高度值

那我们需要调用两次函数，先改变宽度值，然后再改变高度值。其余的原理，运动过程都差不多，只是在最后停止定时器的时候，为了兼容性问题，要用到IE下的call()属性

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	
	oDiv1.onclick = function() {
		
		startMove(this, {
			width : 200
		}, 10, function() {
			startMove(this, {
				height : 200
			}, 10);
		});
	}
	
	function startMove(obj, json, iSpeed, fn) {
		clearInterval(obj.iTimer);
		var iCur = 0;
			
		obj.iTimer = setInterval(function() {
			
			var iBtn = true;
						
			for ( var attr in json ) {
								
				var iTarget = json[attr];
				
				if (attr == 'opacity') {
					iCur = Math.round(css( obj, 'opacity' ) * 100);
				} else {
					iCur = parseInt(css(obj, attr));
				}
				
				if (iCur != iTarget) {
					iBtn = false;
					if (attr == 'opacity') {
						obj.style.opacity = (iCur + iSpeed) / 100;
						obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
					} else {
						obj.style[attr] = iCur + iSpeed + 'px';
					}
				}
				
			}
			
			if (iBtn) {
				clearInterval(obj.iTimer);
				fn && fn.call(obj);
			}
			
		}, 30);
	}
	
	function css(obj, attr) {
		if (obj.currentStyle) {
			return obj.currentStyle[attr];
		} else {
			return getComputedStyle(obj, false)[attr];
		}
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
</body>
</html>

在线操作

寒江独
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js多动画同时运动框架（style属性多项同时改变）
xi_2130的博客
09-26 1075
在js中，我们经常会编写代码，实现元素变化运动，如width，height，opacity等 原生封装了运动框架，代码如下/* * 实现多动画同时运动（多物体运动框架） * * 调用示例 var container = document.getElementById('container'); * startMultiMove(container,{width:80
js运动（三）—— 多元素的运动
蜡笔小达新的博客
05-07 316
本文以元素的单一属性变化为切入点，介绍适用于所有元素、所有属性运动的缓动函数的开发过程和思路。针对实际开发过程遇到的一些问题，引申出知识点。
js实现多物体运动
TSeven37的博客
07-24 271
&lt;!DOCTYPE HTML&gt; &lt;html &gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;多物体运动&lt;/title&gt; &lt;style type=&qu
js多物体运动
05-29
js实现多个元素改变不同样式，使用同一代码，新手适用
js动画多物体运动
最新发布
weixin_64037609的博客
09-18 141
js多物体运动
原生js弹性运动.zip
09-29
在"原生js弹性运动.zip"的压缩包中，很可能包含了一系列的JavaScript代码示例，演示了如何使用原生JavaScript实现以上各种运动效果。通过学习和理解这些代码，开发者可以更好地掌握JavaScript动画和物理模拟的核心...
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
10-15
以下是对标题和描述中提到的原生JavaScript运动函数封装的详细说明： 1. **匀速运动封装**： - `moveObj` 函数是用于封装匀速运动的基本实现。它接受6个参数：目标DOM对象、样式属性（如`top`、`left`等）、起始...
原生JS封装animate运动框架的实例
10-19
在本文中，我们将深入探讨如何使用原生JavaScript封装一个简单的`animate`运动框架。这个框架允许我们实现元素的平滑动画效果，例如改变宽度、高度、位置和透明度等属性。我们将通过一个具体的实例来解释如何实现这...
【JavaScript源代码】原生JS实现各种运动之复合运动.docx
12-30
通过本篇文档的学习，我们了解了如何使用原生JavaScript来实现复合运动的效果。这种技术不仅可以应用于网页动画，还能进一步扩展到更复杂的交互式场景中。随着Web技术的发展，未来还会有更多高级特性和优化手段出现...
【JavaScript源代码】原生JS运动实现轮播图.docx
12-30
【JavaScript源代码】原生JS运动实现轮播图 在网页设计中，轮播图是一种常见的展示多张图片或内容的交互方式。本教程将详细介绍如何使用原生JavaScript实现一个简单的图片轮播效果。基本原理是通过改变包含多张图片...
基于Windows开发语言的小球左右滑动,主要是沿着抛物线进行运动
12-06
主要是基于C++语言，简单的编写一个小球左右运动的案例。适合初学者看看。
【JavaScript】原生js实现多个元素运动、一套运动框架改变任意样式
Owen的博客
01-15 294
多个元素运动 注意：多个元素，定时器需要多个。 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {width: 50px;height: 50px;back
JavaScript 多个属性一起变化
cyanciel的专栏
01-03 358
运动效果 div { width: 150px; height: 150px; background: aliceblue; opacity: 1; border-radius:75px; } window.onload = function(){ var oDiv = document.getEleme
js循环运动的实现
chouzhou3915的博客
01-22 195
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="htt...
js循环运动效果实现
weixin_30892763的博客
10-20 147
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
Vue面试题 70道题目及答案
热门推荐
weixin_38984353的博客
10-12 3万+
Vue面试题 Vue.js介绍 Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API Vue.js是一个构建数据驱动的Web界面的库。 Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项...
js运动-多物体运动
每天进步一点点
05-16 836
基本步骤 1.通过getElementsByTagName获取到要做多物体运动的元素 2.然后for循环遍历元素，添加事件 3.定义startMove函数，需要两个参数，当前“做运动”的元素，和目标值target   注意问题：在多物体运动中，所有的东西不能公用；  window.onload = function(){ var liT
抛物线运动JavaScript实现
Pioneer
04-18 1273
html代码&lt;div id="goods"&gt;&lt;/div&gt;css代码 * { margin: 0; padding: 0 } #goods { width: 50px; height: 50px; background: r...
抛物线
fanfan_hongyun的博客
07-02 925
using UnityEngine; using System.Collections; /// &lt;summary&gt; /// 弓箭轨迹模拟 /// 阿亮设计，欢迎交流经验 /// &lt;/summary&gt; public class Radar : MonoBehaviour { public float Power = 10;//这个代表发射时的速度/力度等，可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值