最后的回调不了？
隳裒
2016-03-27 18:39
<!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">
*{ margin:0; padding:0}
ul,li{ list-style:none}
ul li{
background:#FF0;
width:200px;
height:75px;
border:4px solid #F0F;
margin-bottom:10px;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
</head>
<script>
window.onload=function(){
var oli=document.getElementById('a');
oli.onmouseover=function(){
startMove(this,'height',150,function(){
startMove(oli,'width',300,function(){
startMove(oli,'opacity',100);
});
});
}
oli.onmouseout=function(){
startMove(oli,'opacity',30,function(){
startMove(oli,'width',200,function(){
startMOve(oli,'height',75);
});
});
}
//var alpha=30;
}
// 获取任意属性至，针对IE与火狐做不同的处理 currentStyle是IE方法 Computed Style是火狐的方法
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,iTarget,fn){//iTarget目标值
var timer=null;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var sty=0;
if(attr=='opacity'){
sty=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
sty=parseInt(getStyle(obj,attr));
}
//算速度
var speed=(iTarget-sty)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//检测停止
if(sty==iTarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(sty+speed)+')';
obj.style.opacity=(sty+speed)/100;
}else
obj.style[attr]=sty+speed+'px';
}
},30)
}
</script>
<body>
<ul>
<li id="a"></li>
</ul>
</body>
</html>
1回答
-
- 隳裒
- 2016-03-27 18:47:12
坑爹啊 startMove 的O被大些了
JS动画效果
113925 学习 · 1443 问题
相似问题