javascript动画效果之缓冲动画
这里的html和css的代码是复制之前的随便匀速运动的，所以不需要改变
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} div {
width: 200px;
height: 200px;
background: green;
position: relative;
left: -200px;
} span {
width: 30px;
height: 30px;
line-height: 30px;
background: red;
position: absolute;
left: 200px;
top: 85px;
text-align: center;
cursor: pointer;
}
</style>
</head> <body>
<div id="div">
<span id="show">show</span>
</div>
</body> </html>
js代码和之前的匀速运动的区别在于需要添加一个变量用来控制速度变化
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
} window.onload = function() {
//变量定义区
var pto = $("div");
var btn = $("show");
var timer = null;
var speed = 0; //鼠标移动绑定事件
btn.onmouseenter = start; //函数用于调用定时器timer
function start() {
clearInterval(timer);
timer = setInterval(show, 30);
} //函数用于自动增加
function show() {
//speed是速度变量，用于控制窗口移动的速度
//这里的/20可以变为除任何数，主要为控制速度变化
speed = (0 - pto.offsetLeft) / 20;
//调用了Math方法，ceil是四舍五入取整
speed = Math.ceil(speed);
if (pto.offsetLeft == 0) {
clearInterval(timer);
} else {
pto.style.left = pto.offsetLeft + speed + 'px';
} } //鼠标移出绑定事件
btn.onmouseleave = back; //函数用于调用定时器timer
function back() {
clearInterval(timer);
timer = setInterval(clear, 30);
} //函数用于自动减少
function clear() {
speed = (-200 - pto.offsetLeft) / 20;
//调用了Math方法，floor是舍小数取整
speed = Math.floor(speed);
if (pto.offsetLeft == -200) {
clearInterval(timer)
} else {
pto.style.left = pto.offsetLeft + speed + 'px';
}
} }
</script>
javascript动画效果之缓冲动画的更多相关文章
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- Android 动画效果 及 自定义动画
1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...
- Java 给PPT添加动画效果（预设动画/自定义动画）
PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...
- jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标
1.介绍 补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...
- 通过CSS3属性值的变化实现动画效果+触发这些动画产生交互
css3过渡 transition 兼容性:IE10+ transition: none | all | property 默认为none all 表示所有属性过渡 property 指定属性值,如c ...
- css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...
- 原生js动画效果（源码解析）
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
随机推荐
- XTU 1243 2016
$2016$长城信息杯中国大学生程序设计竞赛中南邀请赛$A$题 循环节. 循环节为$2016$,从数据范围以及题目中的一句话也能间接的体会出应该是有循环节的,并且循环节可能是$2016$. Feel ...
- 面试题-Java Web-Servlet部分
1.什么是Servlet? Servlet是用来处理客户端请求并产生动态网页内容的Java类.Servlet主要是用来处理或者是存储HTML表单提交的数据,产生动态内容,在无状态的HTTP协议下管理状 ...
- AngularJS 初学笔记（理论基础）
AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一 ...
- Hive 常用函数
参考地址:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+UDF 1. parse_url(url, partToExt ...
- wefwewewe
<a hred="https://www.baidu.com">dssf</a>
- 利用flashBack恢复误删除(delete)的表数据
Flashback query(闪回查询)原理 Oracle根据undo信息,利用undo数据,类似一致性读取方法,可以把表置于一个删除前的时间点(或SCN),从而将数据找回. Flashback q ...
- 为什么重写equals()必须重写hashCode()
主要原因是因为hashCode是用对象的内部地址转换成一个整数的,而equals比较得是两个对象,或者是两个对象的内容 如果你重写了equals,而保留hashCode的实现不变,那么很可能两个对象明 ...
- TCP/IP 协议（摘抄）
TCP/IP 协议 TCP/IP 是不同的通信协议的大集合. 协议族 TCP/IP 是基于 TCP 和 IP 这两个最初的协议之上的不同的通信协议的大集合. TCP - 传输控制协议 TCP 用于从应 ...
- CMA-连续内存分配
CMA: Contignous Memory Allocator,连续内存分配,一般是分配给Camera,HDMI等使用,避免预留大块内存 1.声明连续内存 使用dma_contignous_rese ...
- AngularJS基础总结
w3shools angularjs教程 wiki <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...