JavaScript动画效果
记录学习”JavaScript动画效果”笔记
JavaScript动画效果
速度动画
在鼠标移入移出div元素时，设置的动画
window.onload = function () {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function () { //鼠标移入事件
startMove(0);
};
oDiv.onmouseout = function () {//鼠标移出事件
startMove(-200);
}
}var timer = null;
function startMove(iTarget){
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function () {
var speed = 0;
if(oDiv.offsetLeft > iTarget){
speed = -10;
}else{
speed = 10;
}
if(oDiv.offsetLeft == iTarget){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}
}, 30);
}效果如下：
透明度动画
设置鼠标移入时，透明度为100，移出时，为30。
window.onload = function () {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function () {
startMove(100);//鼠标移入的时候，透明度变为100
};
oDiv.onmouseout = function () {
startMove(30);//鼠标移出的时候，透明度变为30
};
} var timer = null;
var alpha = 30;
function startMove(iTarget){
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function () {
var speed = 0;
if(alpha > iTarget){
speed = -10;
}else{
speed = 10;
}
if(alpha == iTarget){
clearInterval(timer);
}else{
alpha += speed;
oDiv.style.filter = "alpha(opacity:"+alpha+")";
oDiv.style.opacity = alpha / 100;
}
}, 30);
};效果如下：
缓冲运动
在”速度动画”中，动画的速度是均匀的，调整以下，使其做缓冲运动：
var timer = null;
function startMove(iTarget){
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function () {
var speed = (iTarget-oDiv.offsetLeft) / 20;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(oDiv.offsetLeft == iTarget){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}
}, 30);
}效果如下：
多物体动画
多物体动画
实现ul列表中ul动画，在鼠标移入和移出时改变其width：
<script>
window.onload = function () {
var aLi = document.getElementsByTagName("li");
for(var i=0;inull ;
aLi[i].onmousemove = function () {
startMove(this, 400);
}
aLi[i].onmouseout = function () {
startMove(this, 200);
}
}
}
function startMove(obj, iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (iTarget-obj.offsetWidth) / 5;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth == iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth + speed + "px";
}
},30);
}
script>效果如下：
获取样式
如下例子，本意是使宽度减少，结果却不是这样的，宽度却在增加：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: red;
border: 2px solid black;
}
style>
<script type="text/javascript">
window.onload = function () {
animation();
}
function animation(){
var aDiv = document.getElementById("div1");
setInterval(function(){
aDiv.style.width = aDiv.offsetWidth -1 + "px";
}, 30);
}
script>
head>
<body>
<div id="div1">font-sizediv>
body>
html>将script改为如下的形式：
<script type="text/javascript">
window.onload = function () {
animation();
}
function animation(){
var aDiv = document.getElementById("div1");
setInterval(function(){
aDiv.style.width = parseInt(getStyle(aDiv,'width')) -1 + "px";
}, 30);
}
//获取样式
function getStyle(obj,attr){
if(obj.currentStyle){
//针对IE浏览器
return obj.currentStyle[attr];
}else{
//针对firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
script>就OK了。
继续完善函数
完善后的startMove()函数如下：
function startMove(obj, attr, iTarget){
clearInterval(obj.timer);
var icur = 0;
obj.timer = setInterval(function () {
//如果属性为透明度
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
}else{
icur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget-icur) / 8;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if(icur == iTarget){
clearInterval(obj.timer);
}else{
//如果属性为透明度
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
}else{
obj.style[attr] = icur + speed + "px";
}
}
},30);链式动画
本例子，是在宽度变化之后，高度再变化，最后才是透明度变化。完善startMove方法，添加一个新的参数，用于回调。
function startMove(obj, attr, iTarget, fn){
clearInterval(obj.timer);
var icur = 0;
obj.timer = setInterval(function () {
//如果属性为透明度
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
}else{
icur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget-icur) / 8;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if(icur == iTarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
//如果属性为透明度
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
}else{
obj.style[attr] = icur + speed + "px";
}
}
},30);
}代码如下：
<script>
window.onload = function () {
var Li = document.getElementById("li1");
Li.onmouseover = function () {
startMove(Li, 'width', 400, function () {
startMove(Li,'height', 200, function () {
startMove(Li, 'opacity', 100);
});
});
};
Li.onmouseout = function () {
startMove(Li, 'opacity', 30, function () {
startMove(Li,'height', 100, function () {
startMove(Li, 'width', 200);
});
});
};
}
script>效果如下：
同时运动
改善startMove方法，使其支持同时运动
function startMove(obj, json, fn){
var flag = true;
clearInterval(obj.timer);
obj.timer = setInterval(function () {
for(var attr in json) {
var icur = 0;
//如果属性为透明度
if (attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
icur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (icur != json[attr]) {
flag = false;
}else{
flag = true;
}
//如果属性为透明度
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
} else {
obj.style[attr] = icur + speed + "px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}, 30);
}动画代码如下：
<script>
window.onload = function () {
var oLi = document.getElementById('li1');
oLi.onmouseover = function () {
startMove(oLi,{width:400,height:200,opacity:100}, function () {
alert('完成');
});
}
oLi.onmouseout = function () {
startMove(oLi,{width:200,height:100,opacity:30});
}
}
script>效果如下：
