js动画效果实现

wowosky
  • 69

妙味课堂首页的logo部分的鼠标悬浮,有一条横线从左到右快速划过,如何去实现
妙味课堂首页如下:
http://www.miaov.com/

运动框架如下:

//物体运动函数
function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var flag=true;
        for(var attr in json){
            var icur=0;
            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(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);
}

//获取底层样式
function getStyle(obj,attribute){//获取底层样式
    if(obj.currentStyle){
        return obj.currentStyle[attribute];//兼容IE浏览器
    }else{
        return window.getComputedStyle(obj,false)[attribute];//兼容火狐浏览器
    }
}

我的想法是用运动框架将logo里面的横线span标签的left值从-100px,变化到270px,但是通过运动框架做出来的是缓冲运动,而且运动的速度非常慢,要等好几秒,接近10秒才能完成动画效果,所以想请大家看看这个动画应该怎么实现

回复
阅读 1.5k
3 个回答
✓ 已被采纳

var speed=(json[attr]-icur)/8; 改这个数值 8,直到调到你觉得速度满意为止。

第二种方式,也是推荐的方式,使用 jQuery 的 animate 动画实现,或者使用 css3 的动画实现。

这种运动框架效率是非常大的问题,不建议使用

用css动画不可以吗

你知道吗?

宣传栏