javascript 缓冲运动框架的实现


Posted in Javascript onSeptember 29, 2017

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中各种trim的实现详细解析
Dec 10 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 #Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 #Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 #Javascript
微信小程序之选项卡的实现方法
Sep 29 #Javascript
vue-cli的eslint相关用法
Sep 29 #Javascript
JavaScript数组的5种迭代方法
Sep 29 #Javascript
微信小程序之GET请求的实例详解
Sep 29 #Javascript
You might like
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php木马webshell扫描器代码
2012/01/25 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php绘制一个矩形的方法
2015/01/24 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php中__toString()方法用法示例
2016/12/07 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
python实现画图工具
2020/08/27 Python
python如何停止递归
2020/09/09 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
学习雷锋标语
2014/06/25 职场文书
开发房地产协议书
2014/09/14 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
民政局个人整改措施
2014/09/24 职场文书
vue 实现上传组件
2021/05/31 Vue.js