`
心语2012
  • 浏览: 45610 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

完美运动框架

    博客分类:
  • js
阅读更多
//获得样式
function getStyle(obj,attr){
   
    if(obj.currentStyle){
       return obj.currentStyle[attr];
    }else{
      return getComputedStyle(obj,false)[attr];
    }
}

//运动函数
function startMove(obj,json,fn){
    clearInterval(obj.timer);
    var iStop = true;
    obj.timer = function(){
       
      for(attr in json){
      
        //获得当前样式
         var iCur =0;
         if(attr=="opacity"){
             icur = parseInt(parseFloat(getStyle(obj,attr))*100);

          }else{
             icur = parseInt(getStyle(obj,attr));
         }

        //获得速度
        var iSpeed = (json[attr] - iCur)/8;
        iSpeed = iSpeed > 0?Math.ceil(iSpeed):Math.floor(iSpeed);
       
       if(json[attr]!=iCur){
           iStop =false;
            
        }

        //运动
        if(attr == "opacity"){
            obj.style.opacity = (iCur + iSpeed)/100;
            obj.style.filter = alpha(opacity =(iCur + iSpeed) );
         }else{
              obj.style[attr] = (iCur + iSpeed) + "px"
           }
       
      }
      if(iStop){
         if(fn)fun();
      }
    }
}
分享到:
评论

相关推荐

    JavaScript完美运动框架

    JavaScript 完美运动框架 在 JavaScript 中,实现一个元素的多个属性同时运动是非常有挑战性的任务。今天,我们将探索一个名为「JavaScript 完美运动框架」的解决方案,该框架可以实现多个属性的同时运动,例如宽度...

    完美的运动框架

    js完美运动框架js完美运动框架js完美运动框架js完美运动框架

    JS运动特效之完美运动框架实例分析

    本篇文章将探讨“JS运动特效之完美运动框架实例分析”,着重讲解如何处理元素运动中的属性检测与判断,以确保所有设定的运动都能正确完成。 在JavaScript中,我们通常使用定时器(`setInterval`)来实现动画效果,...

    防妙味课堂运动框架

    在压缩包中的“完美运动框架”文件,可能是该运动框架的完整代码实现,包括主要的类、方法和示例。通过阅读和研究这些代码,开发者可以深入理解运动框架的工作原理,并根据自己的项目需求进行二次开发或定制。 总的...

    Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)

    Javascript完美运动框架是一个用于实现网页动画效果的JavaScript库,它允许开发者通过简单的函数调用来控制DOM元素的位置、透明度、尺寸等属性的动画变化。本文通过逐行分析完美运动框架的代码,深入探讨其工作原理...

    弹性运动框架

    关于javascript弹性运动原理的介绍和详细代码,可用于平时网页特效的简单制作

    js实现运动图标悬浮滚动

    至于"完美运动框架示例",这可能是提供了一个完整的实现案例,包括了HTML、CSS和JavaScript代码。在实际开发中,可以参考这样的示例进行学习和调试,以更好地理解和掌握悬浮滚动效果的实现。 总结起来,实现"js实现...

    Z-Motion.js

    这是一个完美运动框架,可以实现基本所有常用的运动,包括链式运动,同时运动,多物体运动等,可以对元素的宽、高、字体、颜色、背景、透明度、边框、位置等进行修改,达到运动的效果。

    JavaScript实现跟随滚动缓冲运动广告框

    当我们浏览一些网页时我们会发现页面的的边上会有广告图片,当滚动滚动条的时候这些广告图片会跟随性...这是我在这里使用的一个js运动框架,传递的参数只有一个并不是完美运动框架。传递的参数是广告框的运动距离,因此

    JavaScript运动框架 链式运动到完美运动(五)

    本篇文章主要探讨的是JavaScript运动框架中的一个重要概念——链式运动,以及如何将其运用到完美运动中。 链式运动是指在一个动画完成之后无缝衔接另一个动画,形成连续的视觉效果。这种技术常见于网站设计中,例如...

    机器视觉通用软件框架 基于C#的WPF+halcon开发,视觉和运动控制软件框架,完美运行(整套源码)

    机器视觉通用软件框架 基于C#的WPF+halcon开发,视觉和运动控制软件框架,完美运行(整套源码) 带ui设计器和轴卡运控,上手可用,WPF MVVM开发模式,1:1参考easyvision开发,集成几十个软件算子,插件框架可以...

    JS高级运动实例分析

    本文将深入分析两种常见的运动框架:链式运动框架和完美运动框架。 **链式运动框架** 链式运动框架允许我们串联多个动画效果,确保一个动画完成后才开始下一个。例如,我们可以先改变元素的宽度,接着改变其高度,...

    Dsure-HTML5网站,前端开发框架

    Dsure基于纯CSS的HTML5网站响应式开发框架,可用于国内/外网站开发,完美适用于Designers Site Program 全站静态系统 来历: Dsure参考了国内/外优秀的框架库,经过仔细研究探讨,针对国内和国外网站开发需求,重构...

    Dsure CSS/HTML5网页开发框架 v2.1.rar

    Dsure基于纯CSS的HTML5网站响应式开发框架,可用于国内/外网站开发,完美适用于Designers Site Program 全站静态系统   来历: Dsure参考了国内/外优秀的框架库,经过仔细研究探讨,针对国内和国外网站开发需求,...

    Python-QuaterNet基于四元数的人体运动循环模型

    总的来说,`Python-QuaterNet`项目是机器学习与四元数理论在人体运动建模方面的完美融合,它不仅推动了运动模拟技术的发展,也为相关领域的研究者和开发者提供了宝贵的工具和参考。通过深入理解和应用这一模型,我们...

    365步数最新版本完美运营

    "365步数最新版本完美运营"这个标题暗示了我们正在讨论的是一个与健康、运动和数据分析相关的应用,特别是关于记录步数的功能。在这个365步数小程序的最新版本中,我们可以推测它可能已经优化了用户体验,提高了运行...

Global site tag (gtag.js) - Google Analytics