文档章节

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
码字总数 129412
作品 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
【JSConf EU 2018】Rust + WebAssembly

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

leyayun
06/26
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
2015年10个最佳Web开发JavaScript库

现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中。我们可以参考网上的指导来获取构建代码项目的各种必要信息。如果你是搞Web开发的,那么大多更喜欢支持前端开发的...

IanSun
2015/03/14
0
0
js利用H5的requestAnimationFrame()API实现动画效果

为什么要使用requestAnimationFrame: 我们知道,浏览器实现动画绘制无非就是CSS3的动画属性,和JavaScript的和方法(进行DOM的样式循环改变达到动画效果)。说到这可能很多同学都有疑问了,...

newbeehh
06/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Ubuntu18.04 显卡GF-940MX安装NVIDIA-390.77

解决办法: 下面就给大家一个正确的姿势在Ubuntu上安装Nvidia驱动: (a)首先去N卡官网下载自己显卡对应的驱动:www.geforce.cn/drivers (b)下载后好放在英文路径的目录下,怎么简单怎么来...

AI_SKI
今天
0
0
深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
今天
0
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
今天
0
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
2
0
openJDK之sun.misc.Unsafe类CAS底层实现

注:这篇文章参考了https://www.cnblogs.com/snowater/p/8303698.html 1.sun.misc.Unsafe中CAS方法 在sun.misc.Unsafe中CAS方法如下: compareAndSwapObject(java.lang.Object arg0, long a......

汉斯-冯-拉特
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部