<!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>
2016-06-29
找了我半個小時。。
你的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'){
2016-06-29
第四十八行var flag=true;要定義在定時器內，老師講錯了的~~ 定義在外面的話就只執行了一次flag=true;而當flag=flase的時候就不會變回去了，就不會再執行fn（）了~