您的位置：首页 > Web前端 > JavaScript

Js运动动画系列8--链式动画

2016-07-11 11:45 603 查看

<head>
<title>5-1链式动画</title>
<!--引用js文件，把运动代码封装起来 -->
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
ul li
{
list-style: none;
}
li
{
width: 200px;
height: 100px;
background: yellow;
border: 4px solid #000;
fliter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript" src="Scripts/move.js"></script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>

<script type="text/javascript">
//链式动画:执行完当前动画，调用回调函数执行下一个动画
window.onload = function () {
var li1 = document.getElementById('li1');
li1.onmouseover = function () {
statMove(li1, 'width', 400, function () {
statMove(li1, 'height', 200, function () {
statMove(li1, 'opacity', 100);
});
});
}
li1.onmouseout = function () {
statMove(li1, 'opacity', 30, function () {
statMove(li1, 'height', 100, function () {
statMove(li1, 'width', 200);
});
});
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端 javascript 动画博客

相关文章推荐

新的分享

章节导航