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 可以通过回调函数判断动画 ...
随机推荐
- 接口性能指标TP90
TP90,即,Top percentile 90, 前90%的意思. 这是一个常用于网站性能监控的指标.tp90是一个时间值,例如tp90=3ms,其含义是90%的请求,在3ms之内,可以得到响应. ...
- C#内存泄露与资源释放 经验总结
本文链接:http://blog.csdn.net/yokeqi/article/details/41083939 C#相比其他语言,拥有强大的垃圾回收机制,但并不是这样,你就可以对内存管理放任不管, ...
- 【原】无脑操作：Markdown可以这样玩
一.背景: Markdown是一种纯文本格式的标记语言.通过简单的标记语法,可以使普通文本内容具有一定的格式.因为语法简单明了.功能又比纯文本强大,所以很适合作为开发人员的书写工具.Markdown的 ...
- spark 资源动态分配
'spark.shuffle.service.enabled': 'true', 'spark.dynamicAllocation.enabled': 'false', , , , 'spark.sq ...
- 存储过程中的BeginEnd
存储过程中的BeginEnd和其它语言中的花括号,本身没有事务作用,主要有两个作用1.使语句结果清晰2.语句块作用,比如在 if 后面使用.
- R语言dataframe的常用操作总结
前言:近段时间学习R语言用到最多的数据格式就是data.frame,现对data.frame常用操作进行总结,其中函数大部分来自dplyr包,该包由Hadley Wickham所作,主要用于数据的清洗 ...
- FRP represents an intersection of two programming paradigms.
FRP represents an intersection of two programming paradigms. Functional programming Functional progr ...
- C# SQl通过对视图数据二次查询，统计数据
问题描述: 原数据---------需要在原视图数据中,统计出每个Device_Num设备号下面的交易的总额和分别统计出微信支付宝的交易总额. 解决:从上图数据没办法使用直接查询出要求的数据. .1. ...
- 2019 贝壳找房java面试笔试题 （含面试题解析）
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.贝壳找房等公司offer,岗位是Java后端开发,因为发展原因最终选择去了贝壳找房,入职一年时间了,也成为了面 ...
- Java自学-接口与继承 重写
Java 重写方法 子类可以继承父类的对象方法 在继承后,重复提供该方法,就叫做方法的重写 又叫覆盖 Override 步骤 1 : 父类Item 父类Item有一个方法,叫做effect packa ...