js动画--缓冲动画
前面讲述的动画速度都是匀速的，现实生活中的运动速度的变化不一定是恒定的，存在一定的缓冲，就像火车进站一样，速度会越来越慢。
对于改变速度措施，其实只要将动画第一课的程序稍微的改变一下就可以了，我们来看一下代码如何实现的
html
<!DOCTYPE html>
<html>
<head>
<title>js动画事件</title>
<link href="move.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="move.js"></script>
</head>
<body>
<div id="div1">
<span id="sp1">分享</span>
</div>
</body>
</html>
css
*{
margin:0px;
padding:0px;
}
#div1{
width:200px;
height:200px;
position:absolute;
left:-200px;
background:red;
border:1px solid #eeddcc;
}
#sp1{
display:block;
width:20px;
height:80px;
position:absolute;
left:200px;
top:60px;
border:1px solid red;
color:#036;
line-height:40px;
}
js
var timer;
window.onload=function(){
var div1=document.getElementById("div1");
div1.onmouseover=function(){
RunPlay(0);
}
div1.onmouseout=function(){
RunPlay(-200);
}
} function RunPlay(target){
var div1=document.getElementById("div1");
clearInterval(timer);
var speed=10;
timer=setInterval(function(){
if(target>div1.offsetLeft){
speed=Math.ceil((target-div1.offsetLeft)/10);//缓冲的效果就是在这里实现的，我们将速度的大小与当前位置与终点之间的距离成正比，那么距离越小，速度也越小，此外一定要注意，这里我们要对速度进行向上，或者向下取整，而且对于正数我们要向上取整，对于负速度，我们要向下取整。
}else{
speed=Math.floor((target-div1.offsetLeft)/10);
}
if(div1.offsetLeft==target){
alert(speed);
clearInterval(timer);
}else{
div1.style.left=div1.offsetLeft+speed+"px";
} },50) }
js动画--缓冲动画的更多相关文章
- JS之缓冲动画
原素材 main.html <!DOCTYPE html> <html lang="en"> <head> <link href=&quo ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- easing.js让页面动画丰富起来
jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. <scr ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- JavaScript原生折叠扩展收缩菜单带缓冲动画
JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 <div id="div_two" style="display: none;"> &l ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- 用原生JS写移动动画案例及实际应用
js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
随机推荐
- 【Gamma】“北航社团帮”发布说明——小程序v3.0
目录 Gamma版本新功能 小程序v3.0新功能 新功能列表 新功能展示 这一版修复的缺陷 Gamma版本的已知问题和限制 小程序端 网页端 运行.安装与发布 运行环境的要求 安装与发布 小程序 网页 ...
- Leetcode 219. 存在重复元素 II
说明: 首先,这是一道Easy题,我天!但是题意理解还是很多坑~ 题目描述: 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nums [j] ...
- [ASP.Net ]利用ashx搭建简易接口
转载:https://blog.csdn.net/ZYD45/article/details/79939475 创建接口的方式有很多,像是Web api,nodejs等等 今天,主要介绍,利用ashx ...
- spring&pom两种获取profile的方式
一.原理: 1.实现ApplicationContextAware(当一个类实现了ApplicationContextAware这个接口之后,这个类就可以通过setApplicationContext ...
- c++篇 vc++2010设置和c#一样的代码段,vs2010 两下tab设置
设置vs2010 tab敲两下出 for 片段,因为vs2010的代码片段是在番茄助手里设置的...代码片段管理器中不能设置c++ 所以我只能安装一个番茄助手了... 然后就是修改番茄助手内的[提示] ...
- 框架Ray
高性能最终一致性框架Ray之基本概念原理 一.Actor介绍 Actor是一种并发模型,是共享内存并发模型的替代方案. 共享内存模型的缺点: 共享内存模型使用各种各样的锁来解决状态竞争问题,性能低下且 ...
- Spring JDBC最佳实践(2)
原文地址:https://my.oschina.net/u/218421/blog/38576 使用DataSourceUtils进行Connection的管理由上节代码可知,JdbcTemplate ...
- fio压测
目录 fio工具介绍 参数介绍 测试举例 模板如下: 四路服务器测试的小tips fio工具介绍 用于测试存储设备IO性能. 当存储设备中存在用户数据时,严谨使用fio进行写操作!!! 参数介绍 rw ...
- [POC]微软3389远程漏洞CVE-2019-0708批量检测工具
0x001 Win下检测 https://github.com/robertdavidgraham/rdpscan C:\Users\K8team\Desktop\rdpscan-master\vs1 ...
- [工具]法国神器mimikatz 2.1.1 一键版 & PowerShell版
无需任何参数,运行EXE即可自动读取Windows系统密码 EXE版需要其它功能请使用原版 (参数已写死仅读密码) 结果保存于当前目录mz.log EXE https://github.com/k8g ...