- 链式动画
- 同时运动
- 淘宝动画案例
链式动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>链式动画</title>
<style type="text/css">
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background-color: Yellow;
margin-bottom: 20px;
border: black solid;
opacity: 0.3;
}
</style>
<script>
window.onload = function () {
var Li1 = document.getElementById('li1');
var Li2 = document.getElementById('li2');
Li1.onmouseover = function () {
startMove(Li1, 'width', 400, function () {
startMove(Li1, 'opacity', 100);
})
}
Li1.onmouseout = function () {
startMove(Li1, 'opacity',30, function () {
startMove(Li1, 'width', 200);
});
}
Li2.onmouseover = function () {
startMove(Li2, 'opacity', 100);//改变透明度
}
Li2.onmouseout = function () {
startMove(Li2, 'opacity',30);
}
}
// var alpha=30;
function startMove(obj, attr, iTarget,fn) {
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) / 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.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>
<ul>
<li id="li1" style=""></li>
<li id="li2" style=""></li>
</ul>
</body>
</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;
opacity: 0.3;
}
ul li:hover {
box-shadow: 0 0 7px 4px #ccc;
}
</style>
<script>
window.onload = function () {
var oLi = document.getElementById("li1");
oLi.onmouseover = function () {
startMove(oLi, {'width': 401, 'height': 200, 'opacity': 100})
};
oLi.onmouseout = function () {
startMove(oLi, {'width': 200, 'height': 100, 'opacity': 30});
};
}
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) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.检测停止
if (icur != json[attr]) {
flag = false;
if (attr == 'opacity') {
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);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</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');
for(var i = 0; i < aLi.length; i++) {
aLi[i].onmouseenter = function() {
var _this = this.getElementsByTagName('i')[0];
startMove(_this, {'top':-25, 'opacity': 0}, function() {
_this.style.top = 30 + 'px';
startMove(_this, {'top':20, 'opacity': 100});
});
};
}
};
</script>
</head>
<body>
<div id="move">
<a href="#"><i><img src="img/tao1.png"></i><p>彩票</p></a>
<a href="#"><i><img src="img/tao2.png"></i><p>电影</p></a>
<a href="#"><i><img src="img/tao3.png"></i><p>音乐</p></a>
<a href="#"><i><img src="img/tao4.png"></i><p>缴费</p></a>
<a href="#"><i><img src="img/tao5.png"></i><p>理财</p></a>
<a href="#"><i><img src="img/tao6.png"></i><p>外卖</p></a>
</div>
</body>
</html>
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) / 8;
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);
}