文档章节

JavaScript 动画 3---缓冲动画

奋斗的小芋头
 奋斗的小芋头
发布于 2017/04/29 11:01
字数 277
阅读 11
收藏 0

一、要点

速度:var speed =(iTarget-cDiv1.offsetLeft)/10;   //10为运动系数 缓缓运动

为了避免速度为小数:speed = speed>0?Math.ceil(speed):Math.floor(speed);
  //如果速度大于0 向上取整;速度小于0向下取整

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
	body,div,span{
		margin: 0;
		padding: 0;
	}
	#div1{
		width: 200px;
		height:200px;
		background:red;
		position: relative;
		left: -200px;
	}
	#div1 span{
		width: 20px;
		height: 100px;
		background: blue;
		position: absolute;
		left: 200px;
		top: 50px;
	}
	</style>
	
	<script>
	//Math.floor(9.99); //向下取整 9
	//Math.ceil(9.9);//向上取整 10
	var timer = null;
		window.onload = function(){
			
			var cDiv1 = document.getElementById('div1');
			
			//鼠标移入
			cDiv1.onmouseover = function(){
				startMove(0); //移动函数
			}
			
			//鼠标移出
			cDiv1.onmouseout = function(){
			    startMove(-200); //移动函数
			}
			
			/**
			 * @param {目标} iTarget
			 */
			function startMove(iTarget){
				
				clearInterval(timer); //为了避免定时器多次触发
				
				var cDiv1 = document.getElementById('div1');
				timer = setInterval(function(){
					var speed =(iTarget-cDiv1.offsetLeft)/10; 
					//10为运动系数 缓缓运动
					speed = speed>0?Math.ceil(speed):Math.floor(speed);
					//如果速度大于0 向上取整;速度小于0向下取整
					if(cDiv1.offsetLeft == iTarget){
						clearInterval(timer); //停止定时器
					}else{
					cDiv1.style.left = cDiv1.offsetLeft+speed+'px'; //offsetLeft当前位置的值
					}
				},30)
			}//每30毫秒动一下
		}
		
		
	</script>
	</head>
	<body>
		<div id="div1">
			<span id="share">侧边广告</span>
		</div>
	</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
[译] JavaScript 是如何工作的:CSS 和 JS 动画背后的原理 + 如何优化性能

原文地址:How JavaScript works: Under the hood of CSS and JS animations + how to optimize their performance 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本文永久链接:git......

辣手摧花
05/15
0
0
10 个顶级 JavaScript 动画框架推荐

使用JavaScript可以做出一些引人注目的动画效果,但通常不太容易实现。本文为你整理了10个非常优秀的JavaScript动画框架,使用它们你可以轻松实现动画效果。 1. Raphaël Raphaël是一个小型...

红薯
2012/01/12
9.6K
1
【JSConf EU 2018】Rust + WebAssembly

欧洲JSConf上的神秘项目 在今年的欧洲JSConf上来自Mozilla的Lin Clark为我们展示一个神秘项目,一个的拱形彩虹门(视频传送门),它实际上是由三万个彩色LED组成的画布,可以展现灯光动画,并...

leyayun
06/26
0
0
为开发者准备的 15 个最棒的 JavaScript 动画库

jQuery给各种效果带来了无限的可能性,他有着简单的、启发性的API,你可以利用它创建你能想到的、甚至你想象不到的效果(有赖于你的创造力和想象力)。 富有创造力的jQuery使用可以为网页设计...

oschina
2014/02/05
15.5K
13
CSS 和 JS 动画,哪个更快

基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javascript的...

oschina
2014/04/30
6.4K
7

没有更多内容

加载失败,请刷新页面

加载更多

微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
38分钟前
0
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
1
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
1
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
1
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部