为什么效果不对，谁能帮我看一下
来源：7-1 JS动画案例
Alphonse丿
2016-06-28 11:00
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#oMove{width:280px;height:140px;background-color:#eaeaea;}
#oMove a{display:block;width:68px;height:68px;margin:1px;background-color:#fff;float:left;text-align:center;position:relative;}
#oMove i{position:absolute;top:20px;margin-left:-10px;filter:alpha(opacity:100);opacity:1;}
#oMove p{color:#666;margin-top:48px;}
#oMove p:hover{color:#f40;}
</style>
</head>
<body>
<div id="oMove">
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
</div>
<script>
window.onload=function(){
var oMove=document.getElementById("oMove");
var alis=oMove.getElementsByTagName("a");
for(var i=0;i<alis.length;i++){
alis[i].onmouseover=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});
});
}
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn){
var flag=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
var icur;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-icur)/8;
speed= speed>0?Math.ceil(speed):Math.floor(speed);
if(json[attr]!=icur){
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);
if(fn){
fn();
}
}
}
},3)
}
</script>
</body>
</html>
写回答
关注
2回答
-
- 风中过客
- 2016-06-29 02:15:22
找了我半个小时。。
你的flag 放到定时器里面。
不然等到
if(json[attr]!=icur){
flag=false;
}
你的flag还是为false
的时候， 你的flag 因为之前是false， 所以一直都是false
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var attr in json){
var icur;
if(attr=='opacity'){
-
- qq_飞扬_13
- 2016-06-29 00:59:04
第四十八行var flag=true;要定义在定时器内，老师讲错了的~~ 定义在外面的话就只执行了一次flag=true;而当flag=flase的时候就不会变回去了，就不会再执行fn（）了~
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113925 学习 · 1443 问题
相似问题