JS动画效果:
综合——运动框架 move.js
1、简单动画
1-1、速度动画 D01_share.html
1-2、透明度动画 D02_opacity.html
2、缓冲动画
2-1、缓冲动画 D03_speed.html
3、多物体动画
3-1、多物体动画 D04_morespart01.html D04_morespart02.html
3-2、获取样式 D05_getStyle01.html D05_getStyle02.html
3-3、任意属性值(一) D06_anyValue.html
3-4、任意属性值(二)
4、链式动画
4-1、链式动画 D07_chainAnimation.html
5、同时运动
5-1、同时运动 D08_json.html(json的介绍) D08_sametimeMove.html
5-2、完美运动框架 move.js
6、动画案例
速度动画 D01_share.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>速度动画</title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 250px;
background-color: #807a62;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
height: 50px;
background-color: aquamarine;
position: absolute;
left: 200px;
top: 75px;
text-align: center;
}
</style>
<script>
var oDiv;
window.onload = function() {
oDiv = document.getElementById('div1');
/*oDiv.onmouseover = startMoveIn;
oDiv.onmouseout = startMoveOut;*/
oDiv.onmouseover = function() {
//startMove(10, 0);
startMove02(0);
};
oDiv.onmouseout = function() {
//startMove(-10, -200);
startMove02(-200);
};
};
var timer=null;
/*startMoveIn() 和 startMoveOut()方法相似,可以进行提取合成 --> startMove()*/
/*function startMoveIn() {
clearInterval(timer);
timer = setInterval(function() {
if(oDiv.offsetLeft == 0) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
}
},30);
}
function startMoveOut() {
clearInterval(timer);
timer = setInterval(function() {
if(oDiv.offsetLeft == -200) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
}
},30)
}*/
function startMove(speed, iTarget) {
clearInterval(timer);
timer = setInterval(function() {
if(oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30);
}
//除去speed参数
function startMove02(iTarget) {
clearInterval(timer);
var speed;
if(oDiv.offsetLeft > iTarget) {
speed = -10;
} else {
speed = 10;
}
timer = setInterval(function() {
if(oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30);
}
</script>
</head>
<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>
透明度动画 D02_opacity.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度动画</title>
<style>
body,div{
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
filter: alpha(opacity=30); /*基于IE*/
opacity: 0.3; /*基于火狐、Chrome*/
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function() {
startMove(100);
};
oDiv.onmouseout = function() {
startMove(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);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
缓冲动画 D03_speed.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓冲动画</title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 250px;
background-color: #807a62;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
height: 50px;
background-color: aquamarine;
position: absolute;
left: 200px;
top: 75px;
text-align: center;
}
</style>
<script>
var oDiv;
window.onload = function() {
oDiv = document.getElementById('div1');
/*oDiv.onmouseover = startMoveIn;
oDiv.onmouseout = startMoveOut;*/
oDiv.onmouseover = function() {
//startMove(10, 0);
startMove02(0);
};
oDiv.onmouseout = function() {
//startMove(-10, -200);
startMove02(-200);
};
};
var timer=null;
//除去speed参数
function startMove02(iTarget) {
clearInterval(timer);
timer = setInterval(function() {
var speed = (iTarget - oDiv.offsetLeft) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30);
}
</script>
</head>
<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>
多物体动画 D04_morespart01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多物体动画</title>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
}
</style>
<script>
window.onload = function() {
var aLi = document.getElementsByTagName('li');
for(var i = 0; i<aLi.length; i++) {
aLi[i].timer = null; //为每一个li加一个定时器
aLi[i].onmouseover = function() {
startMove(this,400);
};
aLi[i].onmouseout = function() {
startMove(this,200);
};
}
};
//var timer = null;
function startMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var speed = (iTarget - obj.offsetWidth) / 8;
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>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
D04_morespart02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多物体动画</title>
<style>
div{
width: 300px;
height: 300px;
background: red;
float: left;
margin: 10px;
filter: alpha(opacity=30);
opacity: 0.3;
}
</style>
<script>
var ds;
window.onload = function() {
ds = document.getElementsByTagName('div');
for(var i = 0; i < ds.length; i++) {
ds[i].timer = null;
ds[i].alpha = 30;
ds[i].onmouseover = function() {
startChange(this, 100);
};
ds[i].onmouseout = function() {
startChange(this, 30);
};
}
}
function startChange(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var speed = (iTarget - obj.alpha) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.alpha == iTarget) {
clearInterval(obj.timer);
} else {
obj.alpha += speed;
obj.style.filter = 'alpha(opacity=' + obj.alpha + ')';
obj.style.opacity = obj.alpha / 100;
}
}, 30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
获取样式 D05_getStyle01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
border: 2px solid #000;
font-size: 12px;
color: #fff;
}
</style>
<script>
var oDiv;
window.onload = function() {
oDiv = document.getElementById('div1');
setInterval(function() {
//oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 1 + 'px';
oDiv.style.fontSize = parseInt(getStyle(oDiv, 'fontSize')) + 1 + 'px';
}, 30);
};
//获取样式
function getStyle(obj, attr) {
if(obj.currentStyle) { //currentStyle 针对IE浏览器
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj,false)[attr]; //getComputedStyle 针对火狐浏览器
}
}
</script>
</head>
<body>
<div id="div1">font-size</div>
</body>
</html>
D05_getStyle02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 1px solid yellowgreen;
}
ul li:hover {
box-shadow: 0 0 7px 2px #0CC;
}
</style>
<script>
var aLi;
window.onload = function() {
aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++) {
aLi[i].timer = null;
aLi[i].onmouseover = function() {
startChange(this, 400);
};
aLi[i].onmouseout = function() {
startChange(this, 200);
};
}
};
function startChange(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var icur = parseInt(getStyle(obj, 'width'));
var speed = (iTarget - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(icur == iTarget) {
clearInterval(obj.timer);
} else {
obj.style.width = icur + speed + 'px';
}
}, 30);
}
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</head>
<body>
</body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</html>
任意属性值 D06_anyValue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任意属性值</title>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 1px solid yellowgreen;
filter: alpha(opacity=50);
opacity: 0.5;
}
ul li:hover {
box-shadow: 0 0 7px 2px #0CC;
}
</style>
<script>
var li1, li2, li3;
window.onload = function() {
li1 = document.getElementById('li1');
li2 = document.getElementById('li2');
li3 = document.getElementById('li3');
li1.onmouseover = function() {
startChange(this, 'height', 400);
};
li1.onmouseout = function() {
startChange(this, 'height', 100);
};
li2.onmouseover = function() {
startChange(this, 'width', 400);
};
li2.onmouseout = function() {
startChange(this, 'width', 200);
};
li3.onmouseover = function() {
startChange(this, 'opacity', 100);
};
li3.onmouseout = function() {
startChange(this, 'opacity', 50);
};
};
function startChange(obj, attr, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var icur = 0;
if(attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr))*100);
} else {
icur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - icur) / 10;
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);
}
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</head>
<body>
</body>
<ul>
<li id="li1"><p>我是高度改变~</p></li>
<li id="li2"><p>我是宽度改变~</p></li>
<li id="li3"><p>我是透明度改变~</p></li>
</ul>
</html>
JS动画框架 move.js
/**
* Created by DreamBoy on 2016/1/22.
*/
//获取对象样式,如 getStyle(obj, 'width')
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
//动画效果,如 startMove(obj, 'width', 200)
// fn是回调函数,如果fn有传入的话,动画结束后会执行给函数——》可以形成 链式动画
/*function startMove(obj, attr, iTarget, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//1.取当前的值
var icur = 0;
if(attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr))*100);
} else {
icur = parseInt(getStyle(obj, attr));
}
//2.计算速度
var speed = (iTarget - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.检测停止
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);
}*/
//修改——> 不同属性变化的同时运行(使用json 属性值:目标值)
// startMove(ojb,{attr1:itarget1, attr2:itarget2},fn)
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true;
for(var attr in json) {
//1.取当前的值
var icur = 0;
if(attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr))*100);
} else {
icur = parseInt(getStyle(obj, attr));
}
//2.计算速度
var speed = (json[attr] - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.检测停止
if(icur != json[attr]) {
flag = false;
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);
//obj.timer = null;
if(fn) {
fn();
}
}
}, 30);
}
链式动画 D07_chainAnimation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链式动画</title>
<style>
body, ul, li{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 4px solid #000;
filter: alpha(opacity=30);
opacity: 0.3;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function() {
var li1 = document.getElementById('li1');
li1.onmouseover = function() {
startMove(li1, 'width', 400, function() {
startMove(li1, 'height', 200, function() {
startMove(li1, 'opacity', 100);
});
});
};
li1.onmouseout = function() {
startMove(li1, 'opacity', 30, function() {
startMove(li1, 'height', 100, function() {
startMove(li1, 'width', 200);
});
});
}
};
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
json介绍 D08_json.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json介绍</title>
<script>
//定义一个json
var json = {
a:12,
b:13
};
//遍历json
for(var i in json) {
document.write(i + ":" + json[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
同时运动 D08_sametimeMove.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同时运动</title>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 4px solid #000;
filter: alpha(opacity=30);
opacity: 0.3;
}
ul li:hover {
box-shadow: 0 0 7px 4px #ccc;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function() {
var oLi = document.getElementById("li1");
oLi.onmouseover = function() {
startMove(oLi, {'width':400, 'height':200, 'opacity': 100}, function() {
startMove(oLi, {'width': 600});
});
};
oLi.onmouseout = function() {
startMove(oLi, {'width':200, 'height':100, 'opacity': 30});
};
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
JS动画案例 D09_JSAnimationDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS动画案例</title>
<style>
#move {
width: 300px;
border: 1px solid #ccc;
margin: 0 auto;
padding: 10px;
overflow: hidden;
}
#move a {
float: left;
color: red;
font-size: 10px;
/*border: 1px solid #00CCCC;*/
padding: 35px 30px 0 30px;
margin: 20px 0 20px 10px;
position: relative;
text-decoration: none;
line-height: 25px;
overflow: hidden;
}
#move a i{
position: absolute;
top: 20px;
left: 0;
display: inline-block;
width: 100%;
text-align: center;
filter: alpha(opacity=100);
opacity: 1;
}
#move a:hover {
box-shadow: 0 0 7px 4px #ccc;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function() {
var oMove = document.getElementById('move');
var aLi = oMove.getElementsByTagName('a');
var k=0;
for(var i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function() {
var _this = this.getElementsByTagName('i')[0];
startMove(_this, {'top':-25, 'opacity': 0}, function() {
_this.style.top = 35 + 'px';
startMove(_this, {'top':20, 'opacity': 100});
});
};
}
};
</script>
</head>
<body>
<div id="move">
<a href="#"><i><img src="img/caipiao.png"></i><p>彩票</p></a>
<a href="#"><i><img src="img/movie.png"></i><p>电影</p></a>
<a href="#"><i><img src="img/music.png"></i><p>音乐</p></a>
<a href="#"><i><img src="img/jiaofei.png"></i><p>缴费</p></a>
<a href="#"><i><img src="img/licai.png"></i><p>理财</p></a>
<a href="#"><i><img src="img/food.png"></i><p>外卖</p></a>
</div>
</body>
</html>
结果演示:
鼠标移动到图标处,发生动画效果:
原素材如下:
caipiao.png
movie.png
music.png
jiaofei.png
licai.png
food.png