文档章节

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
从小数学就不及格的我,竟然用极坐标系表白了我的女神!(附代码)

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由郭诗雅发表于云+社区专栏 在数学中,极坐标系(英语:Polar coordinate system)是一个二维坐标系统。该坐标系统中任意位置...

腾讯云加社区
09/20
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

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

张孝国
06/26
0
0
ReactNative页面跳转与事件监听

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_17775997/article/details/82380629 自从React Native出世,虽然官方一直尽可能的优化其性能,为了能让...

大灰狼的小绵羊哥哥
09/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
57
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
49
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
53
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
57
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
54
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部