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 继承机制的实现(待续)
May 18 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
jQuery事件用法详解
Oct 06 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
详解vue中v-on事件监听指令的基本用法
Jul 22 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
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
Jquery解析json数据详解
2013/12/26 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
python 字符串常用函数详解
2019/09/11 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
武汉英思工程科技有限公司–ORACLE面试测试题目
2012/04/30 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
最新自我评价范文
2013/11/16 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
PHP解决高并发问题
2021/04/01 PHP
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android
利用Redis实现点赞功能的示例代码
2022/06/28 Redis