JavaScript动画之多属性链式动画-变宽-变高-改变透明度
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/demo2.css">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/move.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/demo2.js"></script> -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #e52325;
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload=function(){
var box = document.getElementById('box');
box.onmouseover=function(){
startMove(box,'width',400,function(){
startMove(box,'height',400,function(){
startMove(box,'opacity',100);
});
});
};
box.onmouseout=function(){
startMove(box,'opacity',30,function(){
startMove(box,'height',200,function(){
startMove(box,'width',200);
});
});
};
};
function startMove(obj,attr,oTarget,fn){
var incur,flag,speed;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if(attr==='opacity'){
incur = Math.round(parseFloat(getComputedStyle(obj,null)[attr])*100);
}else{
incur = parseInt(getComputedStyle(obj,null)[attr]);
}
flag = oTarget - incur;
speed = flag>0?Math.ceil(flag/10):Math.floor(flag/10);
if(attr==='opacity'){
obj.style[attr] = (incur + speed)/100;
}else{
obj.style[attr] = incur + speed + "px";
}
if(incur===oTarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
点击查看更多内容
2人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦