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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
PHP多维数组排序array详解
2017/11/21 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
django rest framework之请求与响应(详解)
2017/11/06 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
Python交互式图形编程的实现
2019/07/25 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Python程序慢的重要原因
2020/09/04 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
促销活动方案模板
2014/02/24 职场文书
个人安全承诺书
2014/05/22 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
技术转让协议书
2016/03/19 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android