js动画学习(一)
一、运动框架实现思路
1.匀速运动(属性值匀速变化)(改变 left, right, width, height, opacity 等);
2.缓冲运动(属性值的变化速度与当前值与目标值的差成正比);
3.多物体运动;
4.任意属性值的变化(用封装函数);
5.链式运动(同一物体完成一系列的运动);
6.多物体同时运动
====================================================
二、简单运动之匀速运动
下面的函数就是运动系列函数的基本框架。
//鼠标移到元素上元素右移,鼠标离开元素回去。
var timer="";
function Move(speed,locat) {//移动速度,移动终点位置
var ob=document.getElementById('box1');
clearInterval(timer);//先清除定时器,防止定时器的嵌套调用
timer=setInterval(function () {
if (ob.offsetLeft==locat) {//当前位置到达指定终点,关闭定时器
clearInterval(timer);
} else {//否则元素的left属性等于当前left加上每次改变的速度
ob.style.left=ob.offsetLeft+speed+'px';
}
}, 30)
}
举个栗子:
在下面的HTML文档中调用上面的JS函数
<style type="text/css">
*{
margin:;
padding:;
} #box1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left:;
}
</style>
<div id="box1"></div>
<script type="text/javascript">
window.onload=function(){
var ob=document.getElementById('box1');
ob.onmouseover=function(){
Move(10,200);//鼠标移到div上时div从0移到200
}
ob.onmouseout=function(){
Move(-10,0);//鼠标移走时div从200移到0
}
}
</script>
三、简单动画之改变透明度
函数的模型和上一节基本一致,不同的是元素没有自身透明度属性,需要先把透明度初值定义好。
1 var timer="";
2 var alpha=30;//透明度初始值
3 function changeOpacity(speed,target) {
4 var div1=document.getElementById('div1');//获取改变透明度的元素
5 clearInterval(timer);//清除定时器,避免嵌套调用
6 timer=setInterval(function () {
7 if (alpha==target) {//如果透明度达到目标值,清除定时器
8 clearInterval(timer);
9 } else {//当前透明度加上透明度变化的速度
10 alpha=alpha+speed;
11 div1.style.filter='alpha(opacity:'+alpha+')';//IE浏览器
12 div1.style.opacity=alpha/100; //火狐和谷歌
13 }
14 }, 30)
15 }
在下面的HTML文档中引用上面的JS函数,实现透明度的改变
1 <style type="text/css">
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 #div1{
7 width: 200px;
8 height: 200px;
9 background: red;
10 filter: alpha(opacity:30);/*filter滤镜:不透明度,IE浏览器*/
11 opacity: 0.3;/*火狐和谷歌*/
12 }
13 </style>
1 <div id="div1"></div>
2 <script type="text/javascript">
3 window.onload=function(){
4 var div1=document.getElementById('div1');
5 div1.onmouseover=function(){
6 changeOpacity(10,100);
7 }
8 div1.onmouseout=function(){
9 changeOpacity(-10,30);
10 }
11 }
12 </script>
实现鼠标经过时透明度为100,鼠标离开时透明度变为30.
js动画学习(一)的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- js动画学习(四)
七.多属性封装函数 前面分别介绍了单独改变单一属性值得动画,从本节起开始介绍多属性封装函数,一个函数搞定多种属性值的改变. 首先介绍一个很重要的函数getStyle(),这个函数返回一个元素的当前属性 ...
- js动画学习(二)
四.简单动画之缓冲运动 实现速度的缓冲,即不同位置的速度不同,越靠近目标值速度越小,所以速度值与目标值与当前值之差成正比.这里要注意一个问题就是物体在运动中速度是连续变化的,不是按照整数变化的,当物体 ...
- js动画学习(五)
九.多属性同时运动 前面的例子都是每个属性单独运动,如果想要多属性同时运动怎么办?比如,我想要一个div的onmouseover事件中宽和高同时变化.下面这个函数是单独变宽: window.onloa ...
- js动画学习笔记
<html> <head> <meta charest="utf-8"> <title>test</title> < ...
- js动画学习(三)
五.多物体变宽 这里面要注意由于物体变多了,需要给每个物体各配备一个定时器,否则如果只有一个定时器的话,当鼠标在不同物体之间快速滑动时,不同的物体就会出现争抢的现象.所以timer前要加obj. fu ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- [学习笔记]js动画实现方法,作用域,闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
- VUE.js入门学习(4)-动画特效
1.VUE中CSS动画原理(more是 v-enter 具体的根据 name的来决定) 动画是通过在某一时间段来添加样式决定的. 要通过 transition进行包裹. 2.在VUE中使用 anim ...
随机推荐
- Multiwii 代码解读
GPS部分 GPS_angle[ROLL] = (nav[LON]*cos_yaw_x - nav[LAT]*sin_yaw_y) /10;GPS_angle[PITCH] = (nav[LON ...
- ODI学习笔记2--ODI产品架构
ODI学习笔记2--ODI产品架构 ODI产品架构: ODI提供了以下几种管理工具:Designer 用于定义数据转换逻辑,这是最常用的开发工具,大部分的开发任务,包括data store的定义,in ...
- php socket 超时设置
1.php创建socket的方法和设置超时的方法,贴出来分享一下 //如果$waitAckSec=0,则返回成功发送的字节�? //如果$waitAckSec大于0,则返回发送后接收到得内容 //任何 ...
- HDU 5019 Revenge of GCD
题解:筛出约数,然后计算即可. #include <cstdio> #include <algorithm> typedef long long LL; LL a1[10000 ...
- tocken和ticket的数据模型;
/* jshint -W079 */ /* jshint -W020 */ "use strict"; var _ = require("lodash"); m ...
- python 类属性、对象属性
类的普通属性: dir(Myclass), 返回一个key列表: Myclass.__dir__,返回一个字典: 1.类的数据属性: 2.类的方法: 类的特殊属性: 1.Myclass.__name_ ...
- Cookie获取、设置值
设置: HttpCookie cookie = new HttpCookie("cookieName"); cookie.Value = "name1" Htt ...
- 获取多个div,点击第几个,显示第几个
1.闭包:函数内部又定义了一个函数,内部函数引用外部函数的变量,就构成了闭包. <script type="text/javascript"> var divs = d ...
- C++读写文件的简单例子
#include <iostream> #include <fstream> using namespace std; void main() { ofstream in; i ...
- 5.6.3.8 fromCharCode()方法
String构造函数本身还有一个静态方法:fromCharCode().这个方法的任务是接收一或多个字符编码,然后将它们转换成一个字符.从本质上来看,这个方法与实例方法charCodeAt()执行的是 ...