PC端网页特效（三）

最新推荐文章于 2023-02-20 12:36:42 发布
最新推荐文章于 2023-02-20 12:36:42 发布
阅读量171 收藏 1
点赞数
分类专栏： WebAPI编程 文章标签： js callback
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhr_beyond/article/details/114757355
版权

PC端网页特效（三）

1.缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢降下来

2. 核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离步长

3. 停止的条件是：让当前盒子位置等于目标位置时就停止定时器

4. 步长值取整（正值向上取整，负值向下取整）

例子：

<!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 class="btn500">点击夏雨荷到500</button>
	    <button class="btn800">点击夏雨荷到800</button>
	    <span>夏雨荷</span>
	    <script>
	        // 缓动动画函数封装obj目标对象 target 目标位置
	        // 思路：
	        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
	        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
	        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
	        function animate(obj, target) {
	            // 先清除以前的定时器，只保留当前的一个定时器执行
	            clearInterval(obj.timer);
	            obj.timer = setInterval(function() {
	                // 步长值写到定时器的里面
	                // 把我们步长值改为整数 不要出现小数的问题
	                // var step = Math.ceil((target - obj.offsetLeft) / 10);
	                var step = (target - obj.offsetLeft) / 10;
	                step = step > 0 ? Math.ceil(step) : Math.floor(step);
	                if (obj.offsetLeft == target) {
	                    // 停止动画 本质是停止定时器
	                    clearInterval(obj.timer);
	                }
	                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
	                obj.style.left = obj.offsetLeft + step + 'px';
	
	            }, 15);
	        }
	        var span = document.querySelector('span');
	        var btn500 = document.querySelector('.btn500');
	        var btn800 = document.querySelector('.btn800');
	
	        btn500.addEventListener('click', function() {
	            // 调用函数
	            animate(span, 500);
	        })
	        btn800.addEventListener('click', function() {
	                // 调用函数
	                animate(span, 800);
	            })
	            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
	            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
	    </script>
	</body>
</html>

在这里插入图片描述

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>
	    <button class="btn500">点击夏雨荷到500</button>
	    <button class="btn800">点击夏雨荷到800</button>
	    <span>夏雨荷</span>
	    <script>
	        // 缓动动画函数封装obj目标对象 target 目标位置
	        // 思路：
	        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
	        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
	        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
	        function animate(obj, target, callback) {
	            // console.log(callback);  callback = function() {}  调用的时候 callback()
	
	            // 先清除以前的定时器，只保留当前的一个定时器执行
	            clearInterval(obj.timer);
	            obj.timer = setInterval(function() {
	                // 步长值写到定时器的里面
	                // 把我们步长值改为整数 不要出现小数的问题
	                // var step = Math.ceil((target - obj.offsetLeft) / 10);
	                var step = (target - obj.offsetLeft) / 10;
	                step = step > 0 ? Math.ceil(step) : Math.floor(step);
	                if (obj.offsetLeft == target) {
	                    // 停止动画 本质是停止定时器
	                    clearInterval(obj.timer);
	                    // 回调函数写到定时器结束里面
	                    if (callback) {
	                        // 调用函数
	                        callback();
	                    }
	                }
	                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
	                obj.style.left = obj.offsetLeft + step + 'px';
	
	            }, 15);
	        }
	        var span = document.querySelector('span');
	        var btn500 = document.querySelector('.btn500');
	        var btn800 = document.querySelector('.btn800');
	
	        btn500.addEventListener('click', function() {
	            // 调用函数
	            animate(span, 500, function(){
					span.style.backgroundColor = 'green';
				});
	        })
	        btn800.addEventListener('click', function() {
	                // 调用函数
	                animate(span, 800, function() {
	                    span.style.backgroundColor = 'red';
	                });
	            })
	            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
	            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
	    </script>
	</body>
</html>

在这里插入图片描述

3.调用动画函数

首先，封装动画函数文件animate.js

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            if (callback) {
                // 调用函数
                callback();
            }
        }
        // 把每次加 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

调用animate动画函数

<!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>
			.sliderbar {
				position: fixed;
				right: 0;
				bottom: 100px;
				width: 40px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
				color: #fff;
			}
			
			.con {
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 40px;
				background-color: purple;
				z-index: -1;
			}
		</style>
		<script src="animate.js"></script>
	</head>
	<body>
	    <div class="sliderbar">
	        <span>←</span>
	        <div class="con">问题反馈</div>
	    </div>
	
	    <script>
	        // 1. 获取元素
	        var sliderbar = document.querySelector('.sliderbar');
	        var con = document.querySelector('.con');
	        // 当我们鼠标经过 sliderbar 就会让 con这个盒子滑动到左侧
	        // 当我们鼠标离开 sliderbar 就会让 con这个盒子滑动到右侧
	        sliderbar.addEventListener('mouseenter', function() {
	            // animate(obj, target, callback);
	            animate(con, -160, function() {
	                // 当我们动画执行完毕，就把 ← 改为 →
	                sliderbar.children[0].innerHTML = '→';
	            });
	
	        })
	        sliderbar.addEventListener('mouseleave', function() {
	            // animate(obj, target, callback);
	            animate(con, 0, function() {
					// 当我们动画执行完毕，就把 → 改为 ←
	                sliderbar.children[0].innerHTML = '←';
	            });
	
	        })
	    </script>
	</body>
</html>

在这里插入图片描述

红人日天
关注
专栏目录
PC端网页特效 | 常见网页特效案例
不爱吃菜的菜菜的博客
05-19 1048
目录 案例：网页轮播图 轮播图JS全部代码 节流阀 案例：返回顶部 JS代码为 案例：筋头云案例 案例：网页轮播图 轮播图也称为焦点图，是网页中比较常见的网页特效。 功能需求： 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。 图片播放的同时，下面小圆圈模块跟随一起变化。 点击小圆圈，可以播放相应图片。 鼠标不经过轮播图， 轮播图也会自动播放图片。 鼠标经过，轮播图模块， 自动播放停止。 首先要有两.
JavaScript——PC端网页特效（包括：元素偏移量offset系列、元素可视区client系列、元素滚动scroll系列、动画函数封装等）
蟹黄堡
05-26 364
元素偏移量offset系列 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 1.可以获得元素距离带有定位父元素等位置。 2.可以获得元素自身的大小（宽度和高度）。 注意：返回的数值都不带单位。 offset系列常用属性： offset系列属性 说明 element.offsetParent 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body element.offsetTop 返回元素相对带有定位父元素上方的偏移如果没有父级元素或者父级元素
过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数
weixin_30527323的博客
12-12 437
难题 给过渡和动画加上缓动效果是一种常见的手法（比如具有回弹效果的过渡过程）是一种流行的表现手法，可以让界面显得更加生动和真实：在现实世界中，物体A点到B点往往也是不完全匀速的 以纯技术的角度来看，回弹效果是指当一个过渡达到最终值时，往回到一点，然后再次回到最终值，如此往复一次或者多次，并逐渐收敛，最终稳定在最终值。有相当的多JavaScript类库可以创建动画，且内置回弹效果等其他缓动效果。但是...
JS实现缓动效果-让div运动起来
qq_29069777的博客
09-30 438
var tween = { linear:function(t,b,c,d){ return c*t/d + b; }, easeIn:function(t,b,c,d){ return c * ...
PC端网页特效三大系列
weixin_59425810的博客
02-20 103
PC端网页特效三大系列
JavaScript—— PC 端网页特效
weixin_61920612的博客
04-03 1713
JavaScript—— PC 端网页特效
PC 端网页特效
既然选择远方，便只顾风雨兼程！
02-25 473
文章目录PC 端网页特效一、 元素偏移量 offset 系列1、 offset 概述2、 offset 和 style 区别二、 元素可视区 client 系列1、 立即执行函数2、 pageshow 事件三、 元素滚动 scroll 系列1、 元素 scroll 系列属性四、 三大系列总结五、 mouse1、 mouseenter 鼠标事件六、 动画函数封装1、 动画实现原理2、 动画函数的封装3、 缓冲动画原理4、 动画函数添加回调函数5、 节流阀 PC 端网页特效 一、 元素偏移量 offset 系列
PC端网页特效
weixin_43412366的博客
03-21 145
1.元素偏移量offset系列 1.offset概述 offset翻译过来节点偏移量，使用offset系列相关属性可以动态的得到改元素的位置，大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意返回的数值都不带单位 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素 如果没有父级元素则返回body ...
移动端、PC端 网页特效
YuLong的博客
10-10 5672
文章目录PC端网页特效偏移量系列 offset可视区系列 client滚动系列 scroll PC端网页特效 偏移量系列 offset offset 翻译过来就是偏移量， 使用 offset 系列相关属性可以 动态 的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意： 返回的数值都不带单位 常用属性： 图示： offset与style区别： offset style 可以得到任意样式表中的样式值 只能得到行内样式表中的样式值
9.20pc端网页特效案例笔记
qq_66195472的博客
09-20 122
笔记
PC端网页全屏雪花特效
12-09
全屏下雪特效，只需要把js引用一下就可以了，雪花落到浏览器底部还会有短暂的停留，适合圣诞或网站背景特效，效果很不错哦~~
JS之PC端网页特效案例
qq_46655844的博客
07-27 251
学习黑马JS的PC端案例
网页轮播图详细教程
热门推荐
zhr_beyond的博客
03-14 1万+
常见网页特效案例 1. 网页轮播图
DOM（一）
zhr_beyond的博客
03-05 3956
DOM 1.什么是DOM 文档对象类型，是 W3C 组织推荐的处理可扩展标记语言的标准编程接口 通过这些 DOM 接口可以改变网页的内容、结构和样式 2.DOM树 文档：一个页面就是一个文档，DOM 使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点，DOM 中使用 node 表示 Dom把以上内容都看作是对象 3.获取元素 （1）获取元素的方式 ① 根据ID获取 ② 根据标签名获取 ③ 通过HTML5新增方法获取 ④ 特殊元
常见网页特效案例
zhr_beyond的博客
03-15 823
常见网页特效案例 1.返回顶部案例 滚动窗口至文档特定位置 window.scroll(x,y); 用之前的淘宝侧边栏案例做返回顶部，点击添加滚动窗口事件，发现会迅速回到顶部 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial
DOM（二）
zhr_beyond的博客
03-05 587
DOM（二） 1.排他思想 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想 例子 <!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
PC端网页特效（一）
zhr_beyond的博客
03-10 395
PC端网页特效（一） 1.元素偏移量 offset 系列 （1）offset offset 就是偏移量，可以动态的得到该元素的位置、大小等 ● 获取元素距离带有定位父元素的位置 ● 获取元素自身的大小 ● 返回的数值不带单位 （2）offset 系列常用属性 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素 如果父级没有 element.offsetTop 返回元素相对带有定位父元素上方的偏移 element.offsetLeft
移动端网页特效
zhr_beyond的博客
03-17 283
移动端网页特效 1.触摸事件 touch对象代表这样一个触摸点 常见触摸事件： 触摸touch事件 说明 touchstart 手指触摸到一个 DOM 元素触发 touchmove 手指在一个 DOM 元素上滑动时触发 touchend 手指从一个 DOM 元素上移开时触发 2.触摸事件对象 TouchEvent 是一类描述手指在触摸平面的状态变化的事件 touchstart、touchmove、touchend 三个事件都会各自有事件对象 触摸事件对象三个常见对象列表：
pc端网页，调用本地APP
最新发布
07-15
要在PC端网页中调用本地APP，你可以通过以下几种方法实现： 1. 使用自定义URL Scheme：大部分移动APP都支持自定义URL Scheme，通过在网页中使用特定的URL Scheme，可以触发打开对应的本地APP。你可以在网页中添加一个按钮或链接，点击时通过JavaScript代码调用`window.location.href`来打开对应的URL Scheme。 2. 使用浏览器插件：一些浏览器插件可以帮助你在PC端网页中调用本地APP。这些插件通常提供了一个API，你可以通过JavaScript代码调用插件提供的方法来触发打开本地APP。 3. 使用桌面应用程序：如果你想要更深入地集成本地APP功能到PC端网页中，你可以开发一个桌面应用程序。这个应用程序可以与网页进行通信，通过WebSocket、REST API等方式接收来自网页的请求，并执行相应的本地APP操作。 需要注意的是，以上方法都需要用户已经在其设备上安装了对应的本地APP。另外，调用本地APP可能涉及到安全性和权限问题，需要谨慎处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值