获取元素的样式
getStyle函数
function getStyle(element, attr) {
if(element.currentStyle) {
//针对IE
return element.currentStyle[attr];
} else {
//针对Firefox
return getComputedStyle(element, false)[attr];
}
}
此函数返回的是一个字符串，需要调用 parseInt() 或者 parseFloat() 将返回的结果转换为数字值。
简单动画
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>简单动画</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box">
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<span>萌萌哒</span>
</div>
</body>
</html>
CSS
* {
margin:;
padding:;
}
#box {
padding: 5px;
margin: 10px;
border: 1px solid #aaa;
border-radius: 5px;
width: 240px;
box-shadow: 0 0 1px #aaa, 0 0 2px #aaa;
position: absolute;
top:;
left: -260px;
cursor: pointer;
}
#box span {
position: absolute;
display: block;
width: 20px;
background-color: black;
color: white;
margin-left: 245px;
margin-top: -125px;
}
JavaScript
window.onload = function() {
move();
}
function move() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
animation(box, "left", 0, 1, 10);
};
box.onmouseout = function() {
animation(box, "left", -260, 1, 10);
};
}
// 简单动画，接收5个参数：动画元素、动画属性、目标值、变化速度、定时器时间
function animation(element, attr, target, speed, timing) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var curValue = parseInt(getStyle(element, attr));
var count = speed;
if(curValue < target) {
count = speed;
} else if(curValue > target) {
count = -speed;
} else {
count = 0;
}
if(curValue == target) {
clearInterval(element.timer);
} else {
element.style[attr] = curValue + count + "px";
console.log(curValue);
}
}, timing)
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
缓冲动画
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>缓冲动画</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box">
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<span>萌萌哒</span>
</div>
</body>
</html>
CSS
* {
margin:;
padding:;
}
#box {
padding: 5px;
margin: 10px;
border: 1px solid #aaa;
border-radius: 5px;
width: 240px;
box-shadow: 0 0 1px #aaa, 0 0 2px #aaa;
position: absolute;
top:;
left: -260px;
}
#box span {
position: absolute;
display: block;
width: 20px;
background-color: black;
color: white;
margin-left: 245px;
margin-top: -125px;
cursor: pointer;
}
JavaScript
window.onload = function() {
move();
}
function move() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
animation(box, "left", 0, 10, 50);
};
box.onmouseout = function() {
animation(box, "left", -260, 10, 50);
};
}
// 缓冲动画，接收5个参数：动画元素、动画属性、目标值、变化速度、定时器时间
function animation(element, attr, target, speed, timing) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var curValue = parseInt(getStyle(element, attr));
var count = (target - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
if(curValue == target) {
clearInterval(element.timer);
} else {
element.style[attr] = curValue + count + "px";
}
}, timing)
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
透明度动画
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度动画</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
CSS
#box {
width: 100px;
height: 100px;
background-color: blue;
border: 5px solid #333;
border-radius: 5px;
opacity: 0.5;
}
JavaScript
window.onload = function() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
changeOpacity(box, 100, 2, 10, 100);
}
box.onmouseout = function() {
changeOpacity(box, 30, 2, 10, 100);
}
}
function changeOpacity(element, target, method, speed, timing) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var curValue = Math.round(parseFloat(getStyle(element, "opacity")) * 100);
switch(method) {
case 1:
var count = speed;
if(curValue < target) {
count = speed;
} else if(curValue > target) {
count = -speed;
} else {
count = 0;
}
break;
case 2:
var count = (target - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
break;
default:
var count = (target - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
}
if(curValue == target) {
clearInterval(element.timer);
} else {
console.log(curValue);
element.style.opacity = (curValue + count) / 100;
}
}, timing)
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
【1】使用 getStyle 函数获取的 opacity 属性是一个浮点数，不能使用 parseInt() 对其进行转化，应该使用 parseFloat() 。
将 opacity 的值乘以 100 ，然后调用 Math.round() ，将浮点数变成整数。（永远不要比较两个浮点数是否相等，结局绝对会出人意料。）
基础动画框架
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>动画框架演示</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
CSS
#box {
margin: 10px;
border: 5px solid #333;
border-radius: 5px;
box-shadow: 0 0 1px #333, 0 0 2px #333;
width: 100px;
height: 100px;
background-color: blue;
opacity: 0.3;
position: absolute;
left:;
top:;
}
JavaScript
window.onload = function() {
move();
}
function move() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
animation(box, {left:300}, 2, 20, 50, function() {
animation(box, {width:200, height:200, opacity:100}, 2, 20, 50)
})
}
box.onmouseout = function() {
animation(box, {left:0}, 2, 20, 50, function() {
animation(box, {width:100, height:100, opacity:50}, 2, 20, 50)
})
}
}
// 动画函数接收 6 个参数：动画元素、json 数据、运动方式、变化速度、定时器时间、回调函数
// 其中，json 数据的格式为 {attr1: target1, attr2: target2}
// method 参数传入 1 则表示匀速运动，传入 2 则表示缓冲运动
function animation(element, json, method, speed, timing, fn) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var flag = true;
for(var attr in json) {
var curValue = 0;
if(attr == "opacity") {
curValue = Math.round(parseFloat(getStyle(element, attr)) * 100);
} else {
curValue = parseInt(getStyle(element, attr));
}
switch(method) {
case 1:
var count = speed;
if(curValue < json[attr]) {
count = speed;
} else if(curValue > json[attr]) {
count = -speed;
} else {
count = 0;
}
break;
case 2:
var count = (json[attr] - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
break;
default:
var count = (json[attr] - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
}
if(curValue != json[attr]) {
flag = false;
}
if(attr == "opacity") {
element.style.opacity = (curValue + count) / 100;
console.log(curValue);
} else {
element.style[attr] = curValue + count + "px";
}
}
if(flag) {
clearInterval(element.timer);
if(fn) {
fn();
}
}
}, timing);
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
【1】如果需要将元素恢复到动画之前的样子，动画的运动方式应该一致，否则在特殊情况下会出一些 bug 。