PC端网页特效（二）

最新推荐文章于 2023-04-22 12:54:17 发布

红人日天

最新推荐文章于 2023-04-22 12:54:17 发布

阅读量107

点赞数 1

分类专栏： WebAPI编程文章标签： js javascript

本文链接：https://blog.csdn.net/zhr_beyond/article/details/114676888

版权

WebAPI编程专栏收录该内容

13 篇文章 4 订阅

订阅专栏

PC端网页特效（二）

动画函数封装

1. 动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置

实现步骤：

1. 获取盒子当前位置

2. 让盒子在当前位置上加一个距离

3. 利用定时器不断重复操作

4. 加一个结束定时器的条件

5. 此元素需要添加定位，才能使用element.style.left

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
			div {
				position: absolute;
				left: 0;
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
	    <div></div>
	    <script>
	        // 动画原理
	        // 1. 获得盒子当前位置  
	        // 2. 让盒子在当前位置加上1个移动距离
	        // 3. 利用定时器不断重复这个操作
	        // 4. 加一个结束定时器的条件
	        // 5. 注意此元素需要添加定位， 才能使用element.style.left
	        var div = document.querySelector('div');
	        var timer = setInterval(function() {
	            if (div.offsetLeft >= 400) {
	                // 停止动画 本质是停止定时器
	                clearInterval(timer);
	            }
	            div.style.left = div.offsetLeft + 1 + 'px';
	        }, 30);
	    </script>
	</body>
</html>

在这里插入图片描述

2. 动画函数简单封装

函数需要传递2个参数，动画对象和移动到的距离

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
			div {
				position: absolute;
				left: 0;
				width: 100px;
				height: 100px;
				background-color: pink;
			}
			
			span {
				position: absolute;
				left: 0;
				top: 200px;
				display: block;
				width: 150px;
				height: 150px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
	    <div></div>
	    <span>123</span>
	    <script>
	        // 简单动画函数封装obj目标对象 target 目标位置
	        function animate(obj, target) {
	            var timer = setInterval(function() {
	                if (obj.offsetLeft >= target) {
	                    // 停止动画 本质是停止定时器
	                    clearInterval(timer);
	                }
	                obj.style.left = obj.offsetLeft + 1 + 'px';
	
	            }, 30);
	        }
	        var div = document.querySelector('div');
	        var span = document.querySelector('span');
	        // 调用函数
	        animate(div, 300);
	        animate(span, 200);
	    </script>
	</body>
</html>

在这里插入图片描述

3. 动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都要var声明定时器。我们可以给不同的元素使用不同的定时器

核心原理：给当前对象添加属性

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
			div {
				position: absolute;
				left: 0;
				width: 100px;
				height: 100px;
				background-color: pink;
			}
			span {
				position: absolute;
				left: 0;
				top: 200px;
				display: block;
				width: 150px;
				height: 150px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
	    <button>点击才走</button>
	    <div></div>
	    <span></span>
	    <script>
	        // var obj = {};
	        // obj.name = 'andy';
	        // 简单动画函数封装obj目标对象 target 目标位置
	        // 给不同的元素指定了不同的定时器
	        function animate(obj, target) {
	            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
	            // 解决方案就是 让我们元素只有一个定时器执行
	            // 先清除以前的定时器，只保留当前的一个定时器执行
	            clearInterval(obj.timer);
	            obj.timer = setInterval(function() {
	                if (obj.offsetLeft >= target) {
	                    // 停止动画 本质是停止定时器
	                    clearInterval(obj.timer);
	                }
	                obj.style.left = obj.offsetLeft + 1 + 'px';
	
	            }, 30);
	        }
	        var div = document.querySelector('div');
	        var span = document.querySelector('span');
	        var btn = document.querySelector('button');
	        // 调用函数
	        animate(div, 300);
	        btn.addEventListener('click', function() {
	            animate(span, 200);
	        })
	    </script>
	</body>
</html>

在这里插入图片描述

这几天要收拾东西返校什么的，静不下心来好好学习写学习笔记，等安稳利索了，继续更新！

红人日天

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PC端网页特效（二）

PC端网页特效（二）动画函数封装1. 动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置实现步骤：1. 获取盒子当前位置2. 让盒子在当前位置上加一个距离3. 利用定时器不断重复操作4. 加一个结束定时器的条件5. 此元素需要添加定位，才能使用element.style.left例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <me
复制链接

扫一扫

专栏目录