javascript 缓冲运动框架的实现

 更新时间:2017年09月29日 15:26:10   投稿:lqh  
这篇文章主要介绍了javascript 缓冲运动框架的实现的相关资料,希望通过本能帮助到大家,实现这样类似的功能,需要的朋友可以参考下

javascript 缓冲运动框架的实现

框架的使用,大大的提高了我们的编码的效率,下面分享一个缓冲运动框架。

实例代码:

/**
 * Created by wang on 2016/8/3.
 */

//获取非行间样式和行间样式
function getStyle(obj,name) {
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else {
    return getComputedStyle(obj,false)[name];
  }
}
//获取非行间样式和行间样式

//缓冲运动框架
var timer=null;
function startMove(obj,attr,iTarget) {
  clearInterval(obj.timer);
  obj.timer=setInterval(function () {
    var cur=0;

    if(attr=='opacity'){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);
    }
    else {
      cur=parseInt(getStyle(obj,attr));
    }
    var speed=(iTarget-cur)/6;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(cur==iTarget){
      clearInterval(timer);
    }
    else {
      if(attr=='opacity'){
        obj.style.filter='alpha(opcity:'+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
      }
      else {
        obj.style[attr]=cur+speed+'px';
      }
    }
  },30)
}
//缓冲运动框架


如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • 深入分析javascript中的错误处理机制

    深入分析javascript中的错误处理机制

    这篇文章主要介绍了深入分析javascript中的错误处理机制的相关资料,需要的朋友可以参考下
    2016-07-07
  • js中常用的Tab切换效果(推荐)

    js中常用的Tab切换效果(推荐)

    下面小编就为大家带来一篇js中常用的Tab切换效果(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-08-08
  • 详解JavaScript数组的操作大全

    详解JavaScript数组的操作大全

    这篇文章主要给大家介绍js数组的操作,数组的创建,数组元素的发那个吻,数组元素的添加,数组元素的删除,数组的截取和合并,数组的拷贝,数组元素的排序,数组元素的字符串化等知识,对js数组的操作感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • javascript模拟php函数in_array

    javascript模拟php函数in_array

    就是判断一个元素是否存在于数组中的函数,既然js里string都有indexOf函数,为什么不在Array对象里设置一个这样的函数呢,其实就用indexOf这个思想挺好的,不知道制定JS标准的人是基于什么考虑,把这样一个如此常用的功能没考虑在内的。
    2015-04-04
  • js 判断脚本加载完毕的代码

    js 判断脚本加载完毕的代码

    记录一段代码,用来判断脚本是否加载完毕。
    2011-07-07
  • JavaScript设计模式之适配器模式介绍

    JavaScript设计模式之适配器模式介绍

    这篇文章主要介绍了JavaScript设计模式之适配器模式介绍,适配器模式,一般是为要使用的接口,不符本应用或本系统使用,而需引入的中间适配层类或对象的情况,需要的朋友可以参考下
    2014-12-12
  • 微信小程序整个页面的自动适应布局的实现

    微信小程序整个页面的自动适应布局的实现

    这篇文章主要介绍了微信小程序整个页面的自动适应布局的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • javascript 的变量、作用域和内存问题

    javascript 的变量、作用域和内存问题

    这篇文章主要介绍了javascript 的变量、作用域和内存问题的相关资料,需要的朋友可以参考下
    2017-04-04
  • 关于Ajax的原理以及代码封装详解

    关于Ajax的原理以及代码封装详解

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),相信大家对ajax都很熟悉,下面这篇文章主要给大家介绍了关于Ajax原理以及代码封装的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • JS实时弹出新消息提示框并有提示音响起的实现代码

    JS实时弹出新消息提示框并有提示音响起的实现代码

    本文给大家介绍JS实时弹出新消息提示框并有提示音响起的实现代码,实现过程除了使用及时的推送技术外还使用ajax实现此功能,对js提示框提示音响起的相关知识感兴趣的朋友一起学习吧
    2016-04-04

最新评论