文档章节

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
码字总数 129345
作品 0
大连
私信 提问
10 个非常有用的 SVG 动画的 JavaScript 库

SVG 通常可以用作跨分辨率视频。这意味着在一块高分屏幕上不会降低图片的锐度。此外,你甚至可以让SVG动起来,通过使用一些javascript类库。下面,我们分享一些javascript类库,这些类库会帮...

oschina
2015/02/12
12.8K
12
用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动...

鉴客
2010/08/12
7.5K
1
[译] 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
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

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

damon风
2017/11/23
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

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

张孝国
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

docker快速搭建几个常用的第三方服务

本次和大家分享的内容是使用docker快速搭建工作中常用的第三方的服务,对于有一些互联网背景的公司来说,以下几个服务都是很需要的:redis,rabbit,elasticsearch; 如果想学习Java工程化、...

编程SHA
33分钟前
4
0
我的Linux系统九阴真经

在今天,互联网的迅猛发展,科技技术也日新月异,各种编程技术也如雨后春笋一样,冒出尖来了。各种创业公司也百花齐放百家争鸣,特别是针对服务行业,新型互联网服务行业,共享经济等概念的公...

linuxprobe16
41分钟前
13
0
Dubbo标签解析详解

在Spring继承dubbo时,会使用dubbo自定义的标签来定义相关的属性,常见的标签有<dubbo:application/>,<dubbo:registry/>,<dubbo:service/>等。对于这些标签的解析,dubbo都是使用的统一的方...

爱宝贝丶
46分钟前
6
0
网站彩蛋

图形类彩蛋 知乎 https://www.zhihu.com/ 想来知乎工作?请发送邮件到 jobs@zhihu.com 天猫 https://www.tmall.com/ 喵~ 加入我们吧 http://tb.cn/iS8NBOy 超级课程表 http://www.super.cn/...

临江仙卜算子
54分钟前
10
0
ThreadLocal父子线程之间的数据传递问题

一、问题的提出 在系统开发过程中常使用ThreadLocal进行传递日志的RequestId,由此来获取整条请求链路。然而当线程中开启了其他的线程,此时ThreadLocal里面的数据将会出现无法获取/读取错乱...

nonnetta
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部