javascript - js动画效果实现

问题描述

问 题

妙味课堂首页的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秒才能完成动画效果，所以想请大家看看这个动画应该怎么实现

解决方案

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

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

这篇关于javascript - js动画效果实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！