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小数计算出现近似值的解决办法
Feb 06 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
js replace 全局替换的操作方法
Jun 12 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
使用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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python切换hosts文件代码示例
2013/12/31 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
会计实习自我鉴定
2013/12/04 职场文书
企业安全生产责任书
2014/04/14 职场文书
生态养殖创业计划书
2014/05/06 职场文书
个人欠款担保书
2014/05/20 职场文书
小学教研工作总结2015
2015/05/13 职场文书
python如何在word中存储本地图片
2021/04/07 Python
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Java实现简单小画板
2022/06/10 Java/Android