文档章节

JavaScript 动画 1---速度动画

奋斗的小芋头
 奋斗的小芋头
发布于 2017/04/29 09:55
字数 404
阅读 28
收藏 1

1、描述

鼠标悬浮则 10px/30ms向右运动 、鼠标离开 10px/30ms 向左运动/

2、要点

隐藏部分left值设为 -200 。向右运动时,offsetLeft目标为0,向左运动 offsetLeft目标为-200

假设 obj 为某个 HTML 控件

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。

style.left: 
定位元素与包含它的矩形左边界的偏移量

 

<!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>
	var timer = null;
		window.onload = function(){
			
			var cDiv1 = document.getElementById('div1');
			
			//鼠标移入
			cDiv1.onmouseover = function(){
				startMove(10,0); //移动函数
			}
			
			//鼠标移出
			cDiv1.onmouseout = function(){
			    startMove(-10,-200); //移动函数
			}
			
			/**
			 * 
			 * @param {速度} speed
			 * @param {目标} iTarget
			 */
			function startMove(speed,iTarget){
				
				clearInterval(timer); //为了避免定时器多次触发
				
				var cDiv1 = document.getElementById('div1');
				timer = setInterval(function(){
					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
大连
67 个节省开发者时间的实用工具、库与资源(前端向)

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

张孝国
06/26
0
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
js利用H5的requestAnimationFrame()API实现动画效果

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

newbeehh
06/20
0
0
jQuery--[编码规范与最佳实践]

以下是书写jQuery代码的基本规范和最佳实践,这些不包括原生JS规范与最佳实践。 加载jQuery 1、尽量使用CDN加载jQuery。 <script type="text/javascript" src="//ajax.googleapis.com/ajax/l...

Candy_Desire
2014/12/11
0
0
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

前言:   此事例是在vue组件中,使用canvas实现倒计时动画的效果。其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了   canvas动画的原理:利用定时器...

damon风
2017/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

android -------- MVP+DataBinding 的使用

天来说说MVP+DataBinding 的使用 以一个登录案例来讲解 布局:(ConstraintLayout 作为根布局) <layout> <data> <variable name="onClick" ......

切切歆语
39分钟前
1
0
阿里十年Java架构经验总结,这几点尤为重要!

你有没有静下心来思考过:同样是做了x年Java开发,为什么你的技术比别人差很多?为什么别人每月28K你却只有10K? 其实技术水平的高低和个人智商关系不大(毕竟能做Java编程开发大家都不会差)...

别打我会飞
43分钟前
1
0
Ubuntu 中安装和配置 Caddy 服务

首先访问:https://caddyserver.com/download 选择操作系统、插件和授权类型,点击 Download 下载编译好的文件包,或者执行页面最下面的一键安装脚本,完成 caddy 的安装。 安装完成后,/us...

八风不动
58分钟前
2
0
java代码效率优化

1、 尽量指定类的final修饰符 带有final修饰符的类是不可派生的。 2、 尽量重用对象。 3、 尽量使用局部变量,调用方法时传递的参数以及在调用中创建的临时变量都保存在栈(Stack)中,速度较...

踏破铁鞋无觅处
今天
3
0
程序员的几款利器

1. 作为程序员,最希望的就是自己的代码能够在一个云平台上保留下来,gitlab等等这些很多。但是我这里推荐“码云平台”码云平台和开源中国可以直接关联起来。开源中国可以记录博客,当然也是...

ChinaHYF
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部