哈哈哈蜜瓜
2016-10-03 20:55
window.onload = function () {
var omove = document.getElementById("main");
var alist = document.getElementsByTagName("a");
for(var i=0;i<alist.length;i++){
alist[i].onmouseover = function(){
var _this =this.getElementsByTagName("i")[0];
startMove(_this,{top:-25,opacity:0},function(){
startMove(_this,{top:25,opacity:1});
});
}
}
}
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) {
//1、取当前的值
var iucr = 0;
if (attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
icur = parseInt(getStyle(obj, attr));
}
//2、算速度
var speed = (json[attr] - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3、检测停止
if (icur !=json[attr]) {
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();
}
}
},30);
}
亲测,将flag立在timer里面就好了
你把var flag = true;放到obj.timer = setInterval(function () 的下边试试
JS动画效果
113925 学习 · 1443 问题
相似问题