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 获取当前时间戳的代码
Aug 05 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
如何提高数据访问速度
Dec 26 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 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
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
VUE实现吸底按钮
2021/03/04 Vue.js
python设置检查点简单实现代码
2014/07/01 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
办公室驾驶员岗位职责
2013/11/15 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
户外活动总结
2015/02/04 职场文书
简历自我评价优缺点
2015/03/11 职场文书
社区义诊通知
2015/04/24 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
Python中request的基本使用解决乱码问题
2022/04/12 Python
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android