JS实现的动画特效:手风琴特效展示图片、筋斗云动画

  • 一、小知识
    • 1.浏览器的offsetLeft是就近取整，要实现向上取整或向下取整，可以调用Math.ceil（）或Math.floor（）
    • 2.想要通过函数获取行内元素的属性值，要用数组的方式，如获取id的left值，需要传入left参数，调用id.style[left]，如果调用的是id.style.left，则获取的不是left值，所以需要用[]传参
    • 3.获取最终效果的属性值，如获取id的left值，用window.getComputedStyle(slowGo_func_demo, null).left，不好之处为此用法兼容性不好，谷歌可以用这种方法，但是ie需要用下面这种：obj.currentStyle[attr];
    • 4.所有浏览器都支持的方式：
  • 二、缓动动画的初级封装函数
    • 实现效果
    • 代码
      • HTML
      • CSS
      • JS
  • 三、缓动动画的高级封装函数，为手风琴动画做铺垫
    • 实现效果
    • 代码
      • HTML
      • CSS
      • JS
  • 四、筋斗云动画
    • 实现效果
    • 代码
      • HTML
      • CSS
      • JS

一、小知识

1.浏览器的offsetLeft是就近取整，要实现向上取整或向下取整，可以调用Math.ceil（）或Math.floor（）

2.想要通过函数获取行内元素的属性值，要用数组的方式，如获取id的left值，需要传入left参数，调用id.style[left]，如果调用的是id.style.left，则获取的不是left值，所以需要用[]传参

3.获取最终效果的属性值，如获取id的left值，用window.getComputedStyle(slowGo_func_demo, null).left，不好之处为此用法兼容性不好，谷歌可以用这种方法，但是ie需要用下面这种：obj.currentStyle[attr];

4.所有浏览器都支持的方式：

var slowGo_func_demo = document.getElementById("slowGo_func_demo");
slowGo_getStyle(slowGo_func_demo, "left");function slowGo_getStyle(obj, attr) {if (window.getComputedStyle) {return window.getComputedStyle(slowGo_func_demo, null)[ayyr];} else {return obj.currentStyle[attr];}
}

二、缓动动画的初级封装函数

实现效果

代码

HTML

   <!-- 缓动动画，为制作手风琴效果奠基S --><div class="s_f_slider_box"><button id="s_f_slider_btn1">点击缓动</button><button id="s_f_slider_btn2">点击缓动</button><div id="s_f_slider_demo"></div></div><!-- 缓动动画，为制作手风琴效果奠基E -->

CSS

/* 缓动动画，为制作手风琴效果奠基S */
.s_f_slider_box {margin-top: 30px;
}#s_f_slider_btn {height: 30px;border-radius: 20%;background-color: pink;
}#s_f_slider_demo {width: 100px;height: 100px;background-color: pink;margin-top: 30px;position: absolute;
}
/* 缓动动画，为制作手风琴效果奠基E */

JS

// 缓动动画，为制作手风琴效果奠基S
var timer = null;
var s_f_slider_btn1 = document.getElementById("s_f_slider_btn1");
var s_f_slider_btn2 = document.getElementById("s_f_slider_btn2");
var s_f_slider_demo = document.getElementById("s_f_slider_demo");
// 点击按钮后让盒子动起来.将step变成非匀速step=(target-leader)/10
s_f_slider_btn1.onclick = function () {s_f_animate(s_f_slider_demo, 200);
};
s_f_slider_btn2.onclick = function () {s_f_animate(s_f_slider_demo, 600);
};// 封装缓动动画
function s_f_animate(obj, target) {clearInterval(obj.timer);obj.timer = setInterval(function () {var leader = obj.offsetLeft; //就近取整var step = (target - leader) / 10;step = step > 0 ? (step = Math.ceil(step)) : Math.floor(step);leader = leader + step;obj.style.left = leader + "px";if (leader == target) {clearInterval(obj.timer);}});
}
// 缓动动画，为制作手风琴效果奠基E

三、缓动动画的高级封装函数，为手风琴动画做铺垫

实现效果

将属性名通过键值对的方式一块传入，实现多属性同时缓动的封装函数

代码

HTML

 <!-- 升级缓动函数，设置缓动框架S --><div class="slowGo_func_box"><h3>升级版-封装缓动函数框架</h3><h3>缓动动画移动方块</h3><button id="slowGo_func_btn1">点击缓动1</button><button id="slowGo_func_btn2">点击缓动2</button><div id="slowGo_func_demo"></div></div><!-- 升级缓动函数，设置缓动框架E -->

CSS

/* 升级缓动函数，设置缓动框架S */
.slowGo_func_box {height: 1000px;margin-top: 30px;margin-bottom: 20px;
}.slowGo_func_box h3 {margin-bottom: 10px;
}#slowGo_func_demo {width: 100px;height: 100px;background-color: pink;position: absolute;left: 10px;margin-top: 20px;
}/* 升级缓动函数，设置缓动框架E */

JS

// 封装一个让任意对象的指定多个属性变成任意值的动画函数
var timer = null;
var slowGo_func_btn1 = document.getElementById("slowGo_func_btn1");
var slowGo_func_btn2 = document.getElementById("slowGo_func_btn2");
var slowGo_func_demo = document.getElementById("slowGo_func_demo");function slowGo_getStyle(obj, attr) {if (window.getComputedStyle) {return window.getComputedStyle(slowGo_func_demo, null)[attr];} else {return obj.currentStyle[attr];}
}
//传入单个属性的参数function slowGo_animate(obj, attr, target)
// 传入多个属性值参数 json{属性名：属性值}
function slowGo_animate(obj, json) {clearInterval(obj.timer);obj.timer = setInterval(function () {// 假设这一次执行完成后，属性都达到目标值var flag = true;// 获取jspn键值对的属性和目标值// 获取当前对象的属性,键为k 值为json[k]for (var k in json) {var leader = parseInt(slowGo_getStyle(obj, k)) || 0;var step = (target - leader) / 10;var target = json[k];step = step > 0 ? (step = Math.ceil(step)) : Math.floor(step);leader = leader + step;// 设置任意属性obj.style[k] = leader + "px";// 所有属性都到达值后再清楚定时器，运用冒泡思想if (leader != target) {// 当前属性还没到目标flag = false;}}if (flag) {// 如果所有都达到目标了clearInterval(timer);}}, 15);
}
slowGo_func_btn1.onclick = function () {// 函数改变单个属性// slowGo_animate(slowGo_func_demo, "left", 400);// 函数改变多个属性 用对象的形式传入字符串jsonslowGo_animate(slowGo_func_demo, { height: 400, left: 400, width: 300 });
};
// 升级缓动函数，设置缓动框架E

四、筋斗云动画

用作导航栏，鼠标放在哪儿，背景就追随到哪儿，且点击后会定位在当前位置，不再追随

实现效果

代码

HTML

 <!-- 实现筋斗云S --><div class="sd_nav"><h3>实现筋斗云</h3><div id="sd_cloud"></div><ul id="sd_navBar"><li>东秦</li><li>食堂</li><li>六餐</li><li>一餐</li><li>鹏远</li><li>校六</li><li>校一</li><li>校四</li></ul></div><!-- 实现筋斗云E -->

CSS

/* 缓动动画，实现筋斗云S */
.sd_nav {margin-top: 200px;overflow: hidden;position: relative;
}.sd_nav ul {width: 500px;height: 50px;margin-top: 20px;border-radius: 20%;background-color: pink;box-shadow: 2px 5px rgb(211, 211, 159);
}.sd_nav ul li {float: left;margin: 10px 12px;text-align: center;cursor: pointer;z-index: 2;
}#sd_cloud {position: absolute;width: 34px;height: 25px;background-color: #fa3;border-radius: 30% 80% 20% 60%/20% 60% 40% 40%;bottom: 12px;left: 9px;z-index: 1;opacity: 0.6;
}
/* 缓动动画，实现筋斗云E */

JS

// 导航栏的动画，筋斗云S
var sd_lis_position = 0;
var sd_navBar = document.getElementById("sd_navBar");
var sd_cloud = document.getElementById("sd_cloud");
var sd_lis = sd_navBar.children;
for (var i = 0; i < sd_lis.length; i++) {// 鼠标经过后移过去sd_lis[i].onmouseenter = function () {// 让筋斗云显示在当前li的位置var target = this.offsetLeft;s_f_animate(sd_cloud, target);};// 鼠标离开后移回去sd_lis[i].onmouseout = function () {s_f_animate(sd_cloud, sd_lis_position);};//   点击后定位到当前lisd_lis[i].onclick = function () {sd_lis_position = this.offsetLeft;};
}
// 导航栏的动画，筋斗云E

JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）相关推荐

  1. 【前端】javascript实现导航栏筋斗云效果特效

    实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...

  2. 用缓动函数模拟物理动画

    1.缓动函数简介 <1>缓动函数的动画效果是建立在CALayer层级的关键帧动画基础之上 也就是说用普通的UIView的Animation是无法直接实现缓动函数 <2>缓动函数 ...

  3. WPF中的动画——（四）缓动函数

    缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation = new D ...

  4. Easing 缓动函数收集

    Easing 缓动函数收集 缓动函数 ECharts图表 jquery easing 插件 Java 参考资料 之前收集了不少链接,结果久了都404了.还是得复制一份代码过来才放心. 缓动函数 ECh ...

  5. Dotween SetEase Ease缓动函数

    例如 :cameraTrans.DOLocalMove(pos, time).SetEase(Ease.OutExpo); Ease.InQuad 不知道Quad代表什么意思    Ease.InQu ...

  6. 缓动函数 Easing Functions

    缓动函数 Easing Functions 缓动函数 自定义参数随时间变化的速率. 常见效果 Linear:无缓动效果: Quadratic:二次方的缓动(t^2): Sinusoidal:正弦曲线的 ...

  7. CocosCreator之缓动函数类 Easing

    官方文档:使用缓动系统 · Cocos Creator 效果图地址:https://easings.net/ /** !#enThis class provide easing methods for ...

  8. html5js图片滚动,基于滚动的超酷js图片动画特效

    这是一款基于滚动的超酷js图片动画特效.该特效在使用鼠标滚动屏幕时,根据屏幕的当前位置,屏幕上的图片做出相应的动画效果,非常炫酷. 使用方法 HTML结构 CSS样式 // The container ...

  9. DOTween-Ease缓动函数

    Ease.InQuad 不知道Quad代表什么意思    Ease.InQuart 有1/4的时间是没有缓动.    Ease.InQuint, 是1/5时间没有缓动.    Ease.InExpo ...

最新文章

  1. 【九度OJ】题目1206：字符串连接
  2. 百度计算生物研究登上Nature子刊！将3D结构引入分子表征，结果超越斯坦福MIT，已落地制药领域...
  3. 可靠数据传输原理1（构造可靠数据传输协议）
  4. 日调度5万亿次，腾讯云微服务架构体系TSF深度解读
  5. cmake （2）路径指令
  6. POJ3237 树的维护
  7. 本地启动 SAP Commerce Cloud(Hybris) 产生的五个 Java 进程
  8. 查看linux系统属性
  9. tomcat 如何配置环境变量
  10. GAD游戏学院系列丛书发布，引爆峰会现场
  11. 人脸方向学习（十一）：Face Landmark Detection-PFLD解读
  12. vs2008 SP1 安装问题小解决方案
  13. 小米商城静态页面制做
  14. MAC安装中文输入法Rime
  15. 从产品角度看人口政策和生育减少问题
  16. 记一次查深圳磨房百公里徒步照片历程
  17. 判断两线段相交[nyoj 1016 德莱联盟]
  18. C语言编程＞第二十六周 ⑥ 请补充fun函数，该函数的功能是：按 “0”到 “9”统计一个字符串中的奇数数字字符各自出现的次数，结果保存在数组num中。注意：不能使用字符串库函数。
  19. 2021年软考建议什么时候报名？什么时候考试？
  20. 华为设备信息中心配置命令

热门文章

  1. windows下解决Git报错： LF will be replaced by CRLF the next time Git touches it
  2. touchjs中，touch的使用
  3. git--基本知识点--1--工作区/暂存区/版本库
  4. 二级域名三级域名设置方法
  5. ORCLE替换内容中的回车、换行、制表符（tab)
  6. DTU网关连接MQTT服务器、MQTT.fx工具测试
  7. java freemarker转PDF和Word
  8. 阿里云域名注册流程（全流程详细教程）
  9. HTML5在vivo手机适配问题
  10. 2020年最好用的手机是哪一款_2020年什么手机好用，买手机建议买什么牌子的？...