JS链式动画--变高、变宽、变透明度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS链式动画</title>
<style>
*{margin:0;padding:0;}
ul li{
list-style:none;
width:200px;
height:100px;
background:yellow;
margin:20px;
border:2px #000 solid;
filter:alpha(opacity:30);
opacity:0.3;
}
window.onload=function(){
var testLi = document.getElementById("testLi");
testLi.onmouseover = function(){
startMove(testLi, "height",200, function(){
startMove(testLi, "width",400, function(){
startMove(testLi, "opacity",100);
});
});
};
testLi.onmouseout = function(){
startMove(testLi, "opacity",30, function(){
startMove(testLi, "width", 200,function(){
startMove(testLi, "height",100);
});
});
};
};
}
function startMove(obj,attr,iTarget,fn){
//fn是回调函数
clearInterval(obj.timer);
var icur= 0;
if(attr == 'opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
var speed = (itarget - getValue)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//判断运动是否结束
if(getValue == itarget){
clearInterval(obj.timer);
if(fn){//动画结束后判断是否调用回调函数，存在即执行
fn();
}
}else{
if(attr == "opacity"){
icur+= speed;
obj.style.filter = "alpha(opacity:"+ icur+")";
obj.style.opacity = icur/100;
}else{
obj.style[attr] = icur+ speed + "px";
}
}
},30);
}
}
//获取属性值
function getStyle(obj,attr){
if(obj.currentStyle){ //兼容IE浏览器
return obj.currentStyle[attr];
}else{ //兼容firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
</style>
</head>
<body>
<ul>
<li id="testLi"></li>
</ul>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦